DOCSEARCHbyAlgolia
Submit Docs

Grid.js

website·Indexed 35 days ago

https://gridjs.io/docs

A modular JavaScript framework for creating tables with support for server-side storage, pagination, and search. It features native integrations for React, Vue, Angular, and jQuery, and allows for custom plugins built as Preact Functional Components. Grid.js supports various data formats, including XML, and provides localization for multiple languages.

Tokens
19.7K
Snippets
118
Records
135
Agent score
65%

What's inside Grid.js

  1. Overview of Grid.js table plugin

    Grid.js is a lightweight (12kb minified/gzipped), TypeScript-based table plugin designed to work across all modern web browsers and JavaScript frameworks, including React, Angular.js, and Vue, or as a standalone library without any framework. It uses Preact internally for template rendering and a minimal Flux architecture for component communication. It is MIT licensed.

  2. Overview of Grid.js

    Grid.js is a free, open-source JavaScript table plugin published under the MIT license. It is designed to be extensible and compatible with most JavaScript frameworks, including React, Angular, Vue, and VanillaJS.

  3. Overview of Grid.js table plugin

    Grid.js is a lightweight (12kb minified/gzipped), fast table plugin written in TypeScript. It is framework-agnostic, meaning it can be used with React, Angular.js, Vue, or without any framework. It uses Preact internally for template rendering and a minimal Flux architecture for component communication. It is MIT licensed and supports all modern web browsers.

  4. Use Grid.js across different web frameworks

    Grid.js is designed to avoid vendor lock-in, meaning it can be used with React, Angular, Vue, or without any web framework. It has only one external dependency, which is bundled using Rollup, allowing it to be used even without a package manager like NPM.

  5. Retrieve selected rows from the RowSelection plugin store

    The gridjs-selection plugin uses a Redux-based architecture. To access the list of currently selected rows, retrieve the plugin instance using its unique ID from the grid configuration and access the props.store.state object.
    const grid = new Grid({
  columns: [
    {
      id: 'selectRow',
      name: 'Select',
      // select all rows by default!
      data: () => true,
      plugin: { component: RowSelection }
    },
    { 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 using the provided plugin ID ('selectRow')
  const checkboxPlugin = grid.config.plugin.get('selectRow');
  
  // Read the selected rows from the plugin's store
  console.log('selected rows:', checkboxPlugin.props.store.state);
});

  6. Understand the Grid.js Plugin architecture

    Grid.js is a modular framework that uses Preact under the hood. A plugin is essentially a Preact Functional Component that renders a Virtual Node. To create a plugin, you define a component and wrap it in a Plugin interface object containing a unique ID, a render position, and an optional order.
    interface Plugin<T extends FunctionComponent> {
  id: string;
  position: PluginPosition;
  component: T;
  order?: number;
}

  7. Extend Grid.js using TypeScript

    Grid.js is written in TypeScript and includes a comprehensive suite of unit, integration, and snapshot tests, providing a stable foundation for developers to extend the library.

  8. Register Grid.js component in Vue

    The Grid.js Vue wrapper can be registered either locally within a specific component or globally across the entire application.
    // Local Registration
import Grid from 'gridjs-vue'

export default {
  components: {
    Grid
  }
}

// Global Registration (in main.js)
import { GridGlobal } from 'gridjs-vue'
Vue.use(GridGlobal)

  9. Format cell content using the formatter property

    Use the formatter property within a column definition to customize how a cell's value is displayed at runtime. The formatter function receives the cell value as its first argument, allowing you to wrap or modify the text before it is rendered.
    const grid = new Grid({
  columns: [
    {
      name: 'Name',
      formatter: (cell) => `Name: ${cell}`
    },
    'Email',
  ],
  data: [
    ['John Doe', 'john@example.com'],
    ['Jane Doe', 'jane@example.com'],
  ]
});

  10. Initialize a Grid.js instance with the Grid constructor

    To create and configure a Grid.js instance, pass a configuration object containing properties such as columns and data directly into the Grid constructor.
    new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@example.com', '(01) 22 888 4444']
  ]
});

  11. Create a new language locale for Grid.js

    To create a new language locale for the library, copy the existing en_US template from the Grid.js source code, update the translation values, and submit a Pull Request to the repository.

  12. Use Grid.js in the browser without build tools

    Grid.js can be used directly in the browser by including the required CSS and JavaScript files via CDN. The library is exposed as gridjs in the global scope (e.g., window.gridjs). To display a table, instantiate the gridjs.Grid class and call the .render() method passing a DOM element.

    <!-- index.html --> <!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.umd.js"></script> <script src="src/index.js"></script> </body> </html>

    // src/index.js new gridjs.Grid({ columns: ["Name", "Email", "Phone Number"], data: [ ["John", "john@example.com", "(353) 01 222 3333"], ["Mark", "mark@example.com", "(01) 22 888 4444"], ["Eoin", "eoin@example.com", "0097 22 654 00033"], ["Sarah", "sarah@example.com", "+322 876 1233"], ["Afshin", "afshin@example.com", "(353) 22 87 8356"] ] }).render(document.getElementById("wrapper"));