Press "Enter" to skip to content

Simple and Lightweight Data Table JavaScript Library | Grid.js

Advanced Table Plugin – Grid.js uses Preact under the hood to display templates and uses minimal Flux syntax to communicate with other components. It is a tiny bit superior, feature-rich, developer-friendly information table/grid library for representing tabular information on the internet.

Key Features:

  • Small. Only 12 KB with all plug-ins (mini, gzip)
  • Quickly! Grid.js has an in-house pipeline that takes care of data caching and manipulation
  • Works with all web frameworks
  • Supports all modern web browsers
  • No seller lock
  • MIT Licensed and FREE!

How to make use of it:

1. Install & Download:

# NPM
$ npm install gridjs --save

2. Import the Grid.js.

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

// browser  // theme

3. Create a container to carry the information grid.

4. Generate a fundamental information grid from an array of tabular information as follows:

new gridjs.Grid({
    columns: ["Name", "Email", "URL"],
    data: [
      ["CSS", "css@example.com", "https://webcodeflow.com/"],
      ["Script", "script@gmail.com", "https://webcodeflow.com/"],
      ["Com", "com@gmail.com", "https://webcodeflow.com/"]
    ]
}).render(document.getElementById("example"));

5. Or from a current HTML table.

function () {
  const tableRef = useRef(null);
  const wrapperRef = useRef(null);
  useEffect(() => {
    const grid = new gridjs.Grid({
      from: tableRef.current,
    }).render(wrapperRef.current);
  });
  return (
    <>
      
Name Email
John john@example.com
Mike mike@example.com
); }

6. Add pagination management to the information grid.

new gridjs.Grid({
    columns: ["Name", "Email", "URL"],
    data: [
      ["CSS", "css@example.com", "https://webcodeflow.com/"],
      ["Script", "script@gmail.com", "https://webcodeflow.com/"],
      ["Com", "com@gmail.com", "https://webcodeflow.com/"]
    ],
    pagination: true
})

7. Add a search area to the information grid.

new gridjs.Grid({
    columns: ["Name", "Email", "URL"],
    data: [
      ["CSS", "css@example.com", "https://webcodeflow.com/"],
      ["Script", "script@gmail.com", "https://webcodeflow.com/"],
      ["Com", "com@gmail.com", "https://webcodeflow.com/"]
    ],
    search: true
})

8. Determine if the information grid is sortable.

new gridjs.Grid({
    columns: ["Name", "Email", "URL"],
    data: [
      ["CSS", "css@example.com", "https://webcodeflow.com/"],
      ["Script", "script@gmail.com", "https://webcodeflow.com/"],
      ["Com", "com@gmail.com", "https://webcodeflow.com/"]
    ],
    sort: true
})
// or
new gridjs.Grid({
  columns: [{
    name: "Name",
    sort: true,
  }, {
    name: "Email"
  }, {
    name: "URL",
    width: '50%'
  }]
});

9. Display a loading indicator whereas loading tabular information.

new gridjs.Grid({
    columns: ["Name", "Email", "URL"],
    data: () => {
      return new Promise(resolve => {
        setTimeout(() =>
          resolve([
            ["CSS", "css@example.com", "https://webcodeflow.com/"],
            ["Script", "script@gmail.com", "https://webcodeflow.com/"],
            ["Com", "com@gmail.com", "https://webcodeflow.com/"]
          ]), 2000);
      });
    }
})

10. Import tabular information from a distant information supply.

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

11. Determine the width of the information grid.

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

12. Update configs & tabular information.

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

13. Event handlers

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

Full-featured Data Table JavaScript Library, Javascript Table Library

Changelog:

v1.15.3 (08/23/2020)

  • feat(container): setting the state to Status.Ready as soon as the element is rendered

v1.15.2 (08/09/2020)

  • repair(from): use innerHTML if td/th has one textual content factor

v1.15.1 (08/03/2020)

  • repair(server): Server initiator should take away capabilities from args

v1.15.0 (08/02/2020)

  • Adding information callback to ServerStorage

v1.14.0 (07/26/2020)

  • feat: id ought to settle for a perform as nicely
  • chore: exclude assessments/** in tsconfig

v1.13.0 (07/25/2020)

  • feat(serach): including selector perform

v1.12.0 (07/19/2020)

  • feat(tabular): including toArray
  • Adding PluginManager
  • repair(theme): including padding-top to the container to unblock youngster box-shadow

v1.11.0 (07/11/2020)

  • Adding fastened header
  • Fixed Search mustn’t name actions.search when the key phrase is undefined

v1.10.0 (07/05/2020)

  • Adding international EventEmitter
  • Fix(pipeline): unregister ought to examine the steps datatype

See Demo And Download

 

Official Website(grid-js): Click Here

This superior jQuery/javascript plugin is developed by grid-js. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.