Full-featured Data Table JavaScript Library – Grid.js

Category: Javascript , Recommended , Table | January 29, 2023
Author:grid-js
Views Total:1,083 views
Official Page:Go to website
Last Update:January 29, 2023
License:MIT

Preview:

Full-featured Data Table JavaScript Library – Grid.js

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

You Might Be Interested In:


One thought on “Full-featured Data Table JavaScript Library – Grid.js

  1. Robbert

    Also have a look at DataGridXL, which does not have as many features, but is super-performant and user-friendly, also for larger data sets.

    Reply

Leave a Reply