Full-featured Data Table JavaScript Library – Grid.js

Category: Javascript , Recommended , Table | October 4, 2020
Author:grid-js
Views Total:51 views
Official Page:Go to website
Last Update:October 4, 2020
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.

// node.js
import { Grid } from "gridjs";
// theme
import "gridjs/dist/theme/mermaid.css";

// browser
<script src="https://unpkg.com/gridjs/dist/gridjs.production.min.js"></script>
// theme
<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />

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 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. 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:

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