A simple, modern and interactive datatable for the web
Show custom formatted cells based on context
Filter rows based on search text per column
Full Keyboard Navigation support
Show tree structured rows in your table
// Install using yarn
yarn add frappe-datatable
// or npm
npm install frappe-datatable let datatable = new DataTable({
columns: ['Name', 'Position', ...],
data: [
['Tiger Nixon', 'System Architect', ...],
['Garrett Winters', 'Accountant', ...],
...
]
})
{
columns: [],
data: [],
dropdownButton: '▼',
headerDropdown: [
{
label: 'Custom Action',
action: console.log
}
],
events: {
onRemoveColumn(column) {
},
onSwitchColumn(column1, column2) {
},
onSortColumn(column) {
}
},
sortIndicator: {
asc: '↑',
desc: '↓',
none: ''
},
freezeMessage: '',
getEditor: () => {
},
addSerialNoColumn: true,
addCheckboxColumn: false,
enableClusterize: true,
enableLogs: false,
layout: 'fixed', // fixed, fluid
noDataMessage: 'No Data',
cellHeight: null,
enableInlineFilters: false
};