Grid.js - front end table plug-in across frames

I just want to draw a table, but React, Vue, Angular,..., so many front-end frameworks have different table rendering libraries. Is there no table library that can "draw tables at once and run everywhere"? Take a look at Grid.js, a cross framework front-end table plug-in!

brief introduction

Grid.js is an open-source front-end table plug-in of grid JS organization on Github. The code warehouse is  
https://github.com/grid-js/gridjs , the current version is 1.4.2. The slogan of Grid.js is

A table library that works everywhere

That is, a table library that can run everywhere. Grid.js has no third-party dependency locking, and its only external dependency has been packaged, which means that it can be used in all front-end frameworks, including without a framework.

Developed using TypeScript, Grid.js is only 12KB in size, supports all modern browsers, and uses internal pipeline technology to achieve high-speed performance.

Grid.js table plug-in

install

Using Grid.js in Node.js environment, npm can be used for installation:

npm install gridjs --save

Javascript and CSS files need to be imported when using:

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

When used in the browser environment, you can directly reference CDN:

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

Example

When you use Grid.js, you need a wrapper of the div element, then create a Grid instance of Grid.js, define the configuration parameters of the table, and finally call the render method to finish rendering.

An example of using a browser is as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="wrapper"></div>
    <script src="https://unpkg.com/gridjs/dist/gridjs.production.min.js"></script>
    <script>
      new gridjs.Grid({
        columns: ["Name", "Email", "Phone Number"],
        data: [
          ["John", "john@example.com", "(353) 01 222 3333"],
          ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
          ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
          ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
          ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
        ]
      }).render(document.getElementById("wrapper"));
    </script>
  </body>
</html>

You can see that gridjs.Grid uses the parameter columns to define columns and data to add data for each row. Similarly, the example of Grid.js in React is as follows:

import { Grid } from "gridjs";
import "gridjs/dist/theme/mermaid.css";
function helloWorld () {
  const grid = new Grid({
    columns: ['Name', 'Email', 'Phone Number'],
    data: [
      ['John', 'john@example.com', '(353) 01 222 3333'],
      ['Mark', 'mark@gmail.com',   '(01) 22 888 4444']
    ]
  });
  
  useEffect(() => {
    grid.render(document.getElementById('wrapper'));
  });
  
  return (
    <div id="wrapper" />
  );
}

It is not difficult to see that the use of Grid.js is consistent, and both codes render beautiful tables.

Grid.js table example

The design of Grid.js is very simple. The main parameters include:

  • Data: the type is T [] [] or Function, and the data in each row of the table. Data can be a two-dimensional array containing the data of each cell, or a Function that returns a two-dimensional array that can be parsed to realize asynchronous loading (Promise) and dynamic loading.

  • From: an existing HTML table element of type HTMLElement. Grid.js can generate a grid table from an existing HTML form element and add styles and other functions.

  • server: remote data loading. server is an object containing url and optional then and opts. It can render tables according to the remote data obtained from url.

// Remote data loading using the server parameter
const grid = new Grid({
  columns: ['Title', 'Director', 'Producer'],
  server: {
    url: 'https://swapi.dev/api/films/',
    then: data => data.results.map(movie => [movie.title, movie.director, movie.producer])
  }
});

  • columns: the column definition of the table whose type is string [] or TColumn []. The TColumn type includes name, width, sort, and formatter attributes to facilitate customized configuration of each column.

  • Search: search function configuration, which can realize simple client-side keyword search or server-side search by using search.server configuration.

Grid.js search

  • pagination: paging function configuration, which can realize the paging function of the client or server.

Grid.js paging

summary

As a cross framework front-end table plug-in, Grid.js can use the same API to complete table definition and rendering in each front-end framework, which reduces the learning cost when using different frameworks and avoids the problems caused by different dependencies.

At the same time, Grid.js, as a plug-in with rich functions, provides most of the functions of mainstream table plug-ins; With simple design and superior performance, it has great advantages in some table application scenarios with low customization requirements.

Grid.js is currently in the stage of active development. The version number is updated rapidly. Interested developers can participate in open source contributions. As a TypeScript project, grid.js has a clear code structure and is worthy of further study.

Source:

https://www.toutiao.com/i6837266007539581454/

Tags: Javascript node.js Front-end html

Posted on Fri, 08 Oct 2021 20:23:02 -0400 by Q

Hot Tags

©2023 Programmer Help