Frappe DataTable

A simple, modern and interactive datatable for the web

Installation

# Install using yarn
$ yarn add frappe-datatable

# or npm
$ npm install frappe-datatable

Usage

import DataTable from 'frappe-datatable';

// or add
// <script src="frappe-datatable.js" ></script>
// in your html

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

Cell Features

DataTable Cell Demo

Column Features

  • Reorder Columns
  • Sort by Column
  • Remove / Hide Column
  • Custom Actions
  • Resize Column
  • Flexible Layout
DataTable Column Demo

Row Features

  • Row Selection
  • Tree Structured Rows
  • Inline Filters
  • Large Number of Rows
  • Dynamic Row Height

List of configurable options

{
    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
}
Get Started Download

View on GitHub

License: MIT