Datatable

Installation

yarn add frappe-datatable

or include it directly in your HTML

  <script src="https://unpkg.com/frappe-datatable@latest"></script>

Usage

And include it in your project

  import DataTable from "frappe-datatable"

Initialize a new DataTable Object

let datatable = new DataTable({
	columns: ['Name', 'Position', 'Department'],
	data: [
		['Tiger Nixon', 'System Architect', 'Tech'],
		['Garrett Winters', 'Accountant', '']
	]
});

Simple Demo

let element = document.querySelector('.target');

let datatabel = new DataTable(element, {
	columns: ['Framework', 'Built By', 'GitHub Stars', 'License', 'Contributors', 'Age','Project Home', 'Project Link'],
	data: [
		['React', 'Facebook', 149017, 'MIT', 1385, '7 Years', 'https://reactjs.org', 'https://github.com/facebook/react'],
		['Angular', 'Google', 61263, 'MIT', 1119, '5 Years', 'https://angular.io', 'https://github.com/angular/angular'],
		['Vue', 'Evan You', 164408, 'MIT', 293, '4 Years', 'https://vuejs.org', 'https://github.com/vuejs/vue'],
		['Svelte', 'Rich Harris', 33865, 'MIT', 298, '3 Years', 'https://svelte.dev', 'https://github.com/sveltejs/svelte/'],
		['Stencil', 'Ionic Team', 7749, 'MIT', 132, '3 Years', 'https://stenciljs.com', 'https://github.com/ionic-team/stencil'],
	]
});

Formatting Column Values

let element = document.querySelector('.target');

let datatabel = new DataTable(element, {
	columns: [
		{ name: 'Framework' },
		{ name: 'Built By' },
		{ name: 'GitHub Stars', format: value => `${value} ⭐️`},
		{ name: 'License' },
		{ name: 'Contributors' },
		{ name: 'Age', format: value => `${value} Years` },
		{ name: 'Project Home', format: value => `<a class="text-primary" href="${value}">${value}</a>` },
		{ name: 'Project Link', format: value => `<a class="text-primary" href="${value}">${value}</a>` }
	],
	data: [
		['React', 'Facebook', 149017, 'MIT', 1385, 7, 'https://reactjs.org', 'https://github.com/facebook/react'],
		['Angular', 'Google', 61263, 'MIT', 1119, 5, 'https://angular.io', 'https://github.com/angular/angular'],
		['Vue', 'Evan You', 164408, 'MIT', 293, 4, 'https://vuejs.org', 'https://github.com/vuejs/vue'],
		['Svelte', 'Rich Harris', 33865, 'MIT', 298, 3, 'https://svelte.dev', 'https://github.com/sveltejs/svelte/'],
		['Stencil', 'Ionic Team', 7749, 'MIT', 132, 3, 'https://stenciljs.com', 'https://github.com/ionic-team/stencil'],
	]
});

Tree View

let element = document.querySelector('.demo-target-3');
let datatable = new DataTable(element, {
	columns: [
		{ name: 'Files', width: 300, format: formatFileName },
		{ name: 'Size', width: 150, align: 'right' },
		{ name: 'Last Updated', width: 200, align: 'right', default: "A Month Ago"},
	],
	data: [
		{
			'Files': 'Documents',
			'Size': '2M',
			'Last Updated': '',
			'indent': 0
		},
		{
			'Files': 'project.pdf',
			'Size': '1M',
			'Last Updated': 'Yesterday',
			'indent': 1
		},
		{
			'Files': 'my-face.png',
			'Size': '500k',
			'Last Updated': '2018-04-09',
			'indent': 1
		},
		...
	],
	treeView: true
});

Themes

.dark-mode .datatable {
	--dt-border-color: #424242;
	--dt-light-bg: #2e3538;
	--dt-text-color: #dfe2e5;
	--dt-text-light: #dfe2e5;
	--dt-cell-bg: #1c1f20;
	--dt-focus-border-width: 1px;
	--dt-selection-highlight-color: var(--dt-light-bg);
	--dt-toast-message-border: 1px solid var(--dt-border-color);
	--dt-header-cell-bg: #262c2e;
}

List of configurable options

{
    columns: [],
    data: [],
    dropdownButton: '▼',
    headerDropdown: [
        {
            label: 'Custom Action',
            action: function (column) {
                // custom action
            }
        }
    ],
    events: {
        onRemoveColumn(column) {},
        onSwitchColumn(column1, column2) {},
        onSortColumn(column) {},
        onCheckRow(row) {}
    },
    sortIndicator: {
        asc: '↑',
        desc: '↓',
        none: ''
    },
    freezeMessage: '',
    getEditor: null,
    serialNoColumn: true,
    checkboxColumn: false,
    logs: false,
    layout: 'fixed', // fixed, fluid, ratio
    noDataMessage: 'No Data',
    cellHeight: null,
    inlineFilters: false,
    treeView: false,
    checkedRowStatus: true,
    dynamicRowHeight: false,
    pasteFromClipboard: false
};

All Features

Custom Formatters

Inline Editing

Mouse Selection

Copy Cells

Keyboard Navigation

Custom Cell Editor

Reorder Columns

Sort by Column

Remove / Hide Column

Custom Actions

Resize Column

Flexible Layout

Row Selection

Tree Structured Rows

Inline Filters

Large Number of Rows

Dynamic Row Height

Theme Support

Fast, Feature Rich Javascript Datatable