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', 'Department'],
	data: [
		['Tiger Nixon', 'System Architect', 'Tech'],
		['Garrett Winters', 'Accountant', '']
	]
});

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
DataTable Features Demo

Simple Demo

Custom Column Formatter

Tree View

Themes

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

View on GitHub

License: MIT