Simple and Lightweight Data Table JavaScript Library | Grid.js

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