Full-featured Data Table JavaScript Library – Grid.js

Preview:

Description:

Grid.js is a tiny yet advanced, feature-rich, developer-friendly data table/grid library for representing tabular data on the web.

Key Features:

• Works as a standalone JS library.
• Loads tabular data from any JS data.
• Async data import.
• Also works with the existing HTML table.
• Server & client Side rendering.
• Server or Client Side search.
• Server or Client Side pagination.
• Server or Client Side sorting.
• Cell formatting.
• Free for both personal and commercial use.
• And much more.

Install & Download:

# NPM
$ npm install gridjs --save

How to use it:

1. Import the Grid.js.

// ES Module
import { Grid } from "gridjs";
// theme
import "gridjs/dist/theme/mermaid.css";

// browser
<script src="./dist/gridjs.umd.js"></script>
// theme
<link href="./dist/theme/mermaid.min.css" rel="stylesheet" />

// OR 
<script type="module">
  import {
    Grid,
    html
  } from "https://unpkg.com/gridjs?module";
</script>

2. Create a container to hold the data grid.

<div id="example"></div>

3. Generate a basic data grid from an array of tabular data as follows:

new gridjs.Grid({
    columns: ["Name", "Email", "URL"],
    data: [
      ["CSS", "[email protected]", "https://www.cssscript.com"],
      ["Script", "[email protected]", "https://www.cssscript.com"],
      ["Com", "[email protected]", "https://www.cssscript.com"]
    ]
}).render(document.getElementById("example"));

4. Or from an existing HTML table.

function () {
  const tableRef = useRef(null);
  const wrapperRef = useRef(null);
  useEffect(() => {
    const grid = new gridjs.Grid({
      from: tableRef.current,
    }).render(wrapperRef.current);
  });
  return (
    <>
      <table ref={tableRef}>
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>[email protected]</td>
          </tr>
          <tr>
            <td>Mike</td>
            <td><b>[email protected]</b></td>
          </tr>
        </tbody>
      </table>
      <div ref={wrapperRef} />
    </>
  );
}

5. Add a pagination control to the data grid.

new gridjs.Grid({
    columns: ["Name", "Email", "URL"],
    data: [
      ["CSS", "[email protected]", "https://www.cssscript.com"],
      ["Script", "[email protected]", "https://www.cssscript.com"],
      ["Com", "[email protected]", "https://www.cssscript.com"]
    ],
    pagination: true
})

6. Add a search field to the data grid.

new gridjs.Grid({
    columns: ["Name", "Email", "URL"],
    data: [
      ["CSS", "[email protected]", "https://www.cssscript.com"],
      ["Script", "[email protected]", "https://www.cssscript.com"],
      ["Com", "[email protected]", "https://www.cssscript.com"]
    ],
    search: true
})

7. Determine if the data grid is sortable.

new gridjs.Grid({
    columns: ["Name", "Email", "URL"],
    data: [
      ["CSS", "[email protected]", "https://www.cssscript.com"],
      ["Script", "[email protected]", "https://www.cssscript.com"],
      ["Com", "[email protected]", "https://www.cssscript.com"]
    ],
    sort: true
})

// or
new gridjs.Grid({
  columns: [{
    name: "Name",
    sort: true,
  }, {
    name: "Email"
  }, {
    name: "URL",
    width: '50%'
  }]
});

8. Display a loading indicator while loading tabular data.

new gridjs.Grid({
    columns: ["Name", "Email", "URL"],
    data: () => {
      return new Promise(resolve => {
        setTimeout(() =>
          resolve([
            ["CSS", "[email protected]", "https://www.cssscript.com"],
            ["Script", "[email protected]", "https://www.cssscript.com"],
            ["Com", "[email protected]", "https://www.cssscript.com"]
          ]), 2000);
      });
    }
})

9. Import tabular data from a remote data source.

new gridjs.Grid({
    server: {
      url: '/path/to/api/',
      then: data => data.results.map(customData => [customData.title, customData.description, customData.author])
    } 
})

10. Determine the width of the data grid.

new gridjs.Grid({
    width: '100%',
    autoWidth: true
})

11. Update configs & tabular data.

grid.updateConfig({
    // new configs here
});

12. Apply custom styles to the table.

new gridjs.Grid({
    style: {
    td: {
      border: '1px solid #ccc'
    },
    table: {
      'font-size': '15px'
    }
  }
})

13. Or add an additional CSS class to the table.

new gridjs.Grid({
    className: {
      td: 'my-td-class',
      table: 'custom-table-class' 
    }
})

14. Determine whether to fix the table header on the top. Default: false.

new gridjs.Grid({
    fixedHeader: true
})

15. Localize the component.

new gridjs.Grid({
    language: {
      'search': {
        'placeholder': '🔍 Search...'
      },
      'pagination': {
        'previous': '⬅️',
        'next': '➡️',
        'showing': '😃 Displaying',
        'results': () => 'Records'
      }
    }
})

16. Enable the selection plugin, which enables users to select rows or cells. You can then retrieve the selected rows/cells from the plugin store.

// ES Module
import { RowSelection } from "gridjs/plugins/selection";

// OR
<script src="./plugins/selection/dist/selection.umd.js"></script>

const grid = new Grid({
  columns: [
      {
        id: 'awesomeCheckbox',
        name: 'Select',
        plugin: {
          component: RowSelection,
          props: {
            id: (row) => row.cell(2).data
          }
        }
      },
      { 
        name: 'Name',
        formatter: (cell) => `Name: ${cell}`
      },
      'Email',
  ],
  sort: true,
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
  ])
});
grid.on('ready', () => {
  // find the plugin with the give plugin ID
  const checkboxPlugin = grid.config.plugin.get('awesomeCheckbox');
  
  // subscribe to the store events
  checkboxPlugin.props.store.on('updated', function (state, prevState) {
    console.log('checkbox updated', state, prevState);
  });
})

17. Multi languages. Built-in languages:

• en_US
• es_ES
• fr_FR
• it_IT
• tr_TR

// ES Moduleimport { frFR } from "gridjs/l10n";

// OR
<script src="./l10n/dist/l10n.umd.js"></script>

18. Event handlers

grid.on('rowClick', (...args) => console.log('row: ' + JSON.stringify(args), args));
grid.on('cellClick', (...args) => console.log('cell: ' + JSON.stringify(args), args));

Changelog:

v6.0.6 (01/29/2023)

• Bugfixes

v6.0.5 (01/18/2023)

• Bugfixes

v6.0.4 (01/18/2023)

• Bugfixes

v6.0.1 (01/17/2023)

• Grid.js v6 – Functional Component
• Add Spanish (LATAM) translation
• Create cs_CZ.ts
• Bugfixes

v5.1.0 (08/20/2022)

• Add new ua_UA locale file
• Add Malay translation
• Add norwegian locale (nb_NO)
• Add fa_IR locale
• Add Brazilian Portuguese locale/translation
• Add Chinese locale (cn_CN)
• Add Japanese locale (ja_JP)
• Add indonesian locale id_ID
• Add new locale (ru_RU)
• Add new locale (pt_PT)
• Add new locale (ko_KR)
• Bugfixes

v5.0.1 (06/07/2021)

• The mail library is now available in different formats (es, modern, umd) + sourcemaps
• Plugins are now available under gridjs/plugins namespace, e.g. import { RowSelection } from “gridjs/plugins/selection”
• Use gridjs/l10n namespace to import the available Locales, e.g. import { frFR } from “gridjs/l10n”;
• Add turkish language support
• Search ignore content of hidden columns
• Italian support updated

v4.0.0 (04/24/2021)

• Bug Fixes
• resizable: adding resizable module + changing the ShadowTable algorithm

v3.4.0 (03/13/2021)

• Fixed: MessageRow should only consider the visible column
• Adding th content element

v3.3.0 (02/08/2021)

• Adding ‘tr’ className to the config object
• ‘column.attributes’ object will be used for header cells (‘th’) as well

v3.2.2 (01/15/2021)

• Add plugins config property

v3.2.1 (01/01/2021)

• Fixed: MessageRow click won’t trigger rowClick event

v3.2.0 (12/15/2020)

• grid: extending className config and improving the pagination plugin a11y

v3.1.0 (12/03/2020)

• Bug Fixes

v3.0.2 (11/16/2020)

• Fix: sort: button background-color

v3.0.1 (11/15/2020)

• Bugfixes
• row: adding cell(index: number) function
• adding Lerna
• plugin: adding PluginBaseComponent

v2.1.0 (10/04/2020)

• feat: adding hidden flag to columns

v2.0.0 (09/28/2020)

• Adding selector to columns and changing the type of ID to string
• Adding nested headers
• Adding custom attributes config to <td>

v1.17.0 (08/31/2020)

• adding custom attributes config

v1.16.0 (08/29/2020)

• adding data-column-id attribute to td and th element

v1.15.4 (08/24/2020)

• Bug Fix

v1.15.3 (08/23/2020)

• feat(container): setting the state to Status.Ready once the component is rendered

v1.15.2 (08/09/2020)

• fix(from): use innerHTML if td/th has one text element

v1.15.1 (08/03/2020)

• fix(server): Server initiator must remove functions from args

v1.15.0 (08/02/2020)

• Adding data callback to ServerStorage

v1.14.0 (07/26/2020)

• feat: id should accept a function as well
• chore: exclude tests/** in tsconfig

v1.13.0 (07/25/2020)

• feat(serach): adding selector function

v1.12.0 (07/19/2020)

• feat(tabular): adding toArray
• Adding PluginManager
• fix(theme): adding padding-top to the container to unblock child box-shadow

v1.11.0 (07/11/2020)

• Adding fixed header
• Fixed Search should not call actions.search when keyword is undefined

v1.10.0 (07/05/2020)

• Adding global EventEmitter
• Fix(pipeline): unregister should check the steps datatype