Grid.js

https://gridjs.io/docs
Admin
Grid.js is a small, fast, and free TypeScript table plugin designed to work with or without popular...
Tokens:24,231
Snippets:291
Trust Score:8.7
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install gridjs-react

Source: https://gridjs.io/docs/examples/react-cells

Install the React wrapper library for Grid.js using npm.

```bash
npm install gridjs-react --save  

```

--------------------------------

### Install Grid.js with NPM

Source: https://gridjs.io/docs/install

Install the Grid.js package using NPM. This command also installs all necessary dependencies.

```bash
npm install gridjs --save  

```

--------------------------------

### Install Grid.js Svelte Wrapper

Source: https://gridjs.io/docs/integrations/svelte

Install the necessary packages for the Grid.js Svelte wrapper using npm.

```bash
npm install gridjs gridjs-svelte  

```

--------------------------------

### Install Vue.js Integration

Source: https://gridjs.io/docs/integrations/laravel

Install the necessary Vue.js integration for the DataGrid package.

```bash
npm install gridjs-vue  

```

--------------------------------

### Browser HTML Setup

Source: https://gridjs.io/docs/hello-world

Include Grid.js CSS and JS files directly in your HTML to use it without build tools.

```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>

```

--------------------------------

### Initialize Grid with Data and Columns

Source: https://gridjs.io/docs/examples/hello-world

Use this snippet to create a new Grid.js instance with predefined columns and data. This is the most common way to start using Grid.js.

```javascript
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']
  ]
});
```

--------------------------------

### Install Laravel DataGrid Package

Source: https://gridjs.io/docs/integrations/laravel

Install the Laravel DataGrid package using Composer.

```bash
composer require wdev-rs/laravel-datagrid  

```

--------------------------------

### Install Grid.js and Angular Plugin

Source: https://gridjs.io/docs/integrations/angular

Install the necessary packages using npm. This includes the core Grid.js library and the Angular integration package.

```bash
npm install gridjs gridjs-angular  

```

--------------------------------

### React Integration Example

Source: https://gridjs.io/docs/hello-world

Demonstrates how to import and initiate Grid.js within a React functional component using `useRef` and `useEffect`.

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

function helloWorld () {
  const wrapperRef = useRef(null);

  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(wrapperRef.current);
  });
    
  return <div ref={wrapperRef} />;
}

```

--------------------------------

### Import Grid.js in Node.js

Source: https://gridjs.io/docs/install

Import the Grid component and the mermaid CSS theme after installing via NPM.

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

```

--------------------------------

### Subscribe to Row Selection Events

Source: https://gridjs.io/docs/plugins/selection/selection-events

Subscribe to the `RowSelection` store to get updates when rows are selected or deselected. This example shows how to initialize the grid with a selection plugin and then subscribe to the store's events.

```javascript
const grid = new Grid({
  columns: [
      {
        id: 'awesomeCheckbox',
        name: 'Select',
        plugin: {
          component: RowSelection
        }
      },
      {
        name: 'Name',
        formatter: (cell) => `Name: ${cell}`
      },
      'Email',
  ],
  sort: true,
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
  ])
});
  
// subscribe to the store events
grid.config.store.subscribe(function (state) {
  console.log('checkbox updated', state.rowSelection);
})
```

--------------------------------

### Install gridjs-jquery using NPM

Source: https://gridjs.io/docs/integrations/jquery

Install the gridjs-jquery package via npm. This package includes Grid.js itself, so no separate installation is needed.

```bash
npm install --save gridjs-jquery  

```

--------------------------------

### Server-side Search Integration

Source: https://gridjs.io/docs/server-side

Configure the search plugin to perform server-side searches. This example shows how to dynamically append the search keyword to the base URL.

```javascript
search: {
  server: {
    url: (prev, keyword) => `${prev}?search=${keyword}`
  }
}

```

--------------------------------

### Configure Pagination Limit

Source: https://gridjs.io/docs/examples/pagination

Customize the pagination by setting a specific `limit` within the `pagination` configuration object. This example sets the limit to 1 item per page.

```javascript
const grid = new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  pagination: {
    limit: 1
  },
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444']
  ]
});
```

--------------------------------

### Set Initial Width with Resizable Columns

Source: https://gridjs.io/docs/examples/resizable

You can specify an initial overall width for the grid using the `width` option before enabling `resizable: true`. This sets a starting point for column resizing.

```javascript
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']
  ],
  width: 500,
  resizable: true
});
```

--------------------------------

### Dynamic Data Grid Example

Source: https://gridjs.io/docs/integrations/react

A React component demonstrating a Grid.js table with dynamically added records. It uses faker.js for generating sample data and useState for managing the data array.

```javascript
function MyComponent(props) {
  const row = () => [faker.name.findName(), faker.internet.email()];
  const [data, setData] = useState([row()]);
  const update = () => {
    setData(data.slice(0).concat([row()]));
  }
  
  return (
    <div>
      <button onClick={update.bind(this)} className={"py-2 mb-4 px-4 border rounded-md text-white bg-blue-600"}>
        Add record
      </button>
      
      <Grid
        data={data}
        columns={['Name', 'Email']}
        pagination={{
          limit: 5,
        }}
      />
    </div>
  );
}

```

--------------------------------

### Basic Grid Usage

Source: https://gridjs.io/docs/integrations/react

Render a basic Grid.js table in React by passing data, columns, and configuration options to the Grid component. This example includes search and pagination.

```javascript
<Grid  
  data=[
    ['John', 'john@example.com'],
    ['Mike', 'mike@gmail.com']
  ]
  columns={['Name', 'Email']}
  search={true}
  pagination={{
    limit: 1,
  }}
/>  

```

--------------------------------

### Basic Wide Table Configuration

Source: https://gridjs.io/docs/examples/wide-table

This snippet demonstrates the basic setup for a wide table in Grid.js. It defines columns, enables sorting and pagination, and populates the table with data. This is suitable for tables with many columns where content might naturally extend horizontally.

```javascript
const grid = new Grid({
  columns: [
      'Name',
      'Email',
      'Title',
      'Company',
      'Country',
      'County',
   ],
  sort: true,
  pagination: true,
  data: Array(50).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
    faker.name.title(),
    faker.company.companyName(),
    faker.address.country(),
    faker.address.county(),
  ])
});
```

--------------------------------

### POST Method for Server-side Fetching

Source: https://gridjs.io/docs/server-side

Change the default HTTP GET method to POST for server-side data requests by using the `method` property within the `server` configuration.

```javascript
const grid = new Grid({
  server: {
    method: 'POST',
    // ...
  }
});

```

--------------------------------

### Render React Components in Grid.js

Source: https://gridjs.io/docs/examples/react-cells

Example demonstrating how to use React components for cell formatting and action buttons within a Grid.js table. This includes formatting email cells with italicized text and adding an editable button to action cells.

```javascript
const grid = new Grid({
  columns: [
    'Name',
    {
      name: 'Email',
      formatter: (cell) => _(<i>{cell}</i>)
    },
    'Actions'
  ],
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
    _(<button className={"py-2 px-4 border rounded-md text-white bg-blue-600"} onClick={() => alert('clicked!')}>Edit</button>)
  ])
});

```

--------------------------------

### Grid.js Plugin with Angular Component

Source: https://gridjs.io/docs/integrations/angular

Example of creating a Grid.js plugin using Angular's `h` function for rendering custom content within the grid.

```typescript
{
    id: 'myplugin',
    component: h(() => h('h1', {}, 'Hello world!'), {}),
    position: PluginPosition.Header,
  }

```

--------------------------------

### Connect Custom Component to Grid.js

Source: https://gridjs.io/docs/examples/virtual-dom

Integrate a custom Preact component into Grid.js by using it within the data mapping. This example renders bolded email addresses in the 'Email' column.

```javascript
function bold(text) {
  return h('b', {}, text);
}
const grid = new Grid({
  columns: [
      'Name',
      'Email'
   ],
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    bold(faker.internet.email())
  ])
});
```

--------------------------------

### Basic Grid.js Vue Component Usage

Source: https://gridjs.io/docs/integrations/vue

Implement a basic Grid.js table in a Vue component by passing column headers and row data. This example demonstrates the fundamental way to display data using gridjs-vue.

```html
<template>  
  <grid :cols="cols" :rows="rows"></grid>  
</template>  

<script>  
  import Grid from 'gridjs-vue'  
  
  export default {  
    name: 'Cars',  
    components: {  
      Grid  
    },  
    data() {  
      return {  
        cols: ['Make', 'Model', 'Year', 'Color'],  
        rows: [  
          ['Ford', 'Fusion', '2011', 'Silver'],  
          ['Chevrolet', 'Cruz', '2018', 'White']  
        ]  
      }  
    }  
  }  
</script>  

```

--------------------------------

### Create a Custom Preact Component

Source: https://gridjs.io/docs/examples/virtual-dom

Define a custom Preact component function that utilizes the 'h' function to create virtual DOM elements. This example creates a 'bold' component.

```javascript
function bold(text) {
  return h('b', {}, text);
}
```

--------------------------------

### Calculate and Format Cell Based on Row Data

Source: https://gridjs.io/docs/examples/cell-formatting

Use the 'formatter' property to access data from other cells in the same row for calculations. The example sums 'Salary 1' and 'Salary 2' and formats the result.

```javascript
const grid = new Grid({
  columns: [
    'Salary 1',
    'Salary 2',
    {
      name: 'Sum',
      data: null,
      formatter: (_, row) => `$${(row.cells[0].data + row.cells[1].data).toLocaleString()} USD`
    },
  ],
  data: Array(5).fill().map(x => [
    Math.round(Math.random() * 100000),
    Math.round(Math.random() * 100000)
  ])
});
```

--------------------------------

### Wide Table with nowrap Styling

Source: https://gridjs.io/docs/examples/wide-table

This example shows how to configure Grid.js for wide tables by applying `white-space: nowrap` to the table element. This prevents text from wrapping, ensuring all content remains on a single line and contributing to the table's width. It's useful when you want to maintain the integrity of long text entries without line breaks.

```javascript
const grid = new Grid({
  columns: [
      'Name',
      'Email',
      'Title',
      'Company',
      'Country',
      'County',
   ],
  style: {
    table: {
      'white-space': 'nowrap'
    }
  },
  sort: true,
  pagination: true,
  data: Array(50).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
    faker.name.title(),
    faker.company.companyName(),
    faker.address.country(),
    faker.address.county(),
  ])
});
```

--------------------------------

### Install Row Selection Plugin

Source: https://gridjs.io/docs/plugins/selection/row-selection

Add a new column to your Grid.js configuration to enable row selection. This column will contain the checkboxes for selecting rows. The 'Email' column is used as the row identifier in this example.

```javascript
const grid = new Grid({
  columns: [
      {
        id: 'myCheckbox',
        name: 'Select',
        plugin: {
          // install the RowSelection plugin
          component: RowSelection,
        }
      },
      {
        name: 'Name',
        formatter: (cell) => `Name: ${cell}`
      },
      'Email',
  ],
  sort: true,
  search: true,
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
  ])
});
```

--------------------------------

### Initialize and Update Grid.js with updateConfig

Source: https://gridjs.io/docs/config

Create an empty Grid.js instance and then use the updateConfig method to set its initial configuration, including columns and data.

```javascript
new Grid().updateConfig({
  columns: ['Name', 'Email', 'Phone Number'],
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444']
  ]
});
```

--------------------------------

### Initialize Grid.js with Constructor

Source: https://gridjs.io/docs/config

Use the Grid constructor to pass an initial configuration object, including columns and data, when creating a new Grid.js instance.

```javascript
new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444']
  ]
});
```

--------------------------------

### Initialize Grid.js from an HTML Table

Source: https://gridjs.io/docs/config/from

Use the 'from' option to specify the HTML table element to use as the data source. This is an optional configuration.

```javascript
new gridjs.Grid({
    from: document.getElementById('myTable')
}).render();
```

--------------------------------

### Hide a Column in Grid.js

Source: https://gridjs.io/docs/examples/hidden-columns

Add `hidden: true` to a column's definition to hide it from the grid. This example demonstrates hiding the 'Name' column.

```javascript
const grid = new Grid({
  columns: [
      {
        name: 'Name',
        hidden: true
      },
      'Email',
      'Title',
   ],
  sort: true,
  pagination: true,
  data: Array(50).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
    faker.name.title(),
  ])
});
```

--------------------------------

### Initialize Grid.js with jQuery

Source: https://gridjs.io/docs/integrations/jquery

Select an HTML element with a jQuery selector and call the Grid constructor to initialize Grid.js with specified columns and data.

```javascript
$("div#wrapper").Grid({
  columns: ['Name', 'Age', 'Email'],
  data: [
    ['John', 25, 'john@k.com'],
    ['Mark', 59, 'mark@e.com'],
    // ...
  ],
});  

```

--------------------------------

### Link Grid.js Mermaid Theme CSS via unpkg

Source: https://gridjs.io/docs/install

Link the mermaid theme CSS file for Grid.js from unpkg.

```html
<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />  

```

--------------------------------

### Enable Basic Pagination

Source: https://gridjs.io/docs/config/pagination

Configure the number of rows per page and hide the pagination summary. Use this for client-side pagination.

```javascript
new Grid({
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444'],
    ['Eoin', 'eo3n@yahoo.com',   '(05) 10 878 5554'],
    ['Nisen', 'nis900@gmail.com',   '313 333 1923']
  ],
  pagination: {
    limit: 2,
    summary: false
  }
});
```

--------------------------------

### Initialize Grid with Multi-Column Sort Enabled

Source: https://gridjs.io/docs/examples/multi-sort

This snippet shows how to initialize a Grid.js instance with multi-column sorting enabled. Ensure the 'sort' option is set to true. Users can then hold 'shift' and click headers to sort.

```javascript
const grid = new Grid({
  columns: [
    'Name',
    'Age',
    'Email',
  ],
  sort: true,
  data: [
    ['Mark',  25, 'john@example.com'],
    ['Nancy', 25, 'n99@gmail.com'],
    ['Eoin',  55, 'eo3n@yahoo.com'],
    ['Nisen', 60, 'nis900@gmail.com']
  ]
});
```

--------------------------------

### Import RowSelection Plugin (CDN - UMD)

Source: https://gridjs.io/docs/plugins/selection

Include the Selection plugin via a CDN link to access the UMD format.

```html
<script src="https://unpkg.com/gridjs/plugins/selection/dist/selection.umd.js"></script>  
```

--------------------------------

### Basic Svelte Grid Component Usage

Source: https://gridjs.io/docs/integrations/svelte

Demonstrates how to import and use the Grid component in a Svelte application. Ensure to import the Grid.js CSS theme for proper styling.

```svelte
<script>
  import Grid from "gridjs-svelte"

  const data = [
    { name: "John", email: "john@example.com" },
    { name: "Mark", email: "mark@gmail.com" },
  ]
</script>

<Grid data={data} />

<style global>
  @import "https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css";
</style>

```

--------------------------------

### Ordering Plugins in Grid.js

Source: https://gridjs.io/docs/plugins/basics

Illustrates how to control the rendering order of plugins within the same position using the optional 'order' property in the plugin.add() method. Lower numbers render first.

```javascript
grid.plugin.add({
  id: 'myfirstplugin',
  component: MyPlugin,
  position: PluginPosition.Header,
  order: 1,
});

grid.plugin.add({
  id: 'mysecondplugin',
  component: MyPlugin,
  position: PluginPosition.Header,
  order: 2,
});
```

--------------------------------

### Publish Vendor Files

Source: https://gridjs.io/docs/integrations/laravel

Publish the package's vendor files using the Artisan command.

```bash
php artisan vendor:publish --provider="WdevRs\LaravelDatagrid\LaravelDatagridServiceProvider"  

```

--------------------------------

### Using html function for header cells

Source: https://gridjs.io/docs/examples/html-header-cells

Utilize the `html` function within the `columns` configuration to render custom HTML content in header cells. This example shows an italicized 'Name' and a styled 'Email' header.

```javascript
const grid = new Grid({
  columns: [
    {
      id: 'name',
      name: html('<i>Name</i>'),
    },
    {
      id: 'email',
      name: html('<div style="border: 1px solid #ccc;padding: 5px;border-radius: 5px;text-align: center;">Email</div>'),
    }
  ],
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
  ])
});
```

--------------------------------

### Adding Plugins via React Wrapper

Source: https://gridjs.io/docs/plugins/basics

Shows how to integrate plugins into a Grid.js component when using the React wrapper. Plugins are provided as an array to the 'plugins' property.

```jsx
<Grid
  ...
  plugins={[{
    id: 'myplugin',
    component: MyPlugin,
    position: PluginPosition.Header,
    order: 1
  }]}

/>
```

--------------------------------

### Using h function for virtual DOM header cells

Source: https://gridjs.io/docs/examples/html-header-cells

Employ the `h` function to construct virtual DOM elements for header cells. This example renders a bold 'Name' and a styled 'Email' header using `h`.

```javascript
const grid = new Grid({
  columns: [
    {
      id: 'name',
      name: h('b', {}, 'Name'),
    },
    {
      id: 'div',
      name: h('div', {
        style: {
          border: '1px solid #ccc',
          padding: '5px',
          'border-radius': '5px',
          'text-align': 'center',
        }
      }, 'Email'), 
    },
  ],
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
  ]),
  search: true
});
```

--------------------------------

### Import Grid.js React Wrapper

Source: https://gridjs.io/docs/examples/react-cells

Import the '_' function from the gridjs-react package to enable React component rendering.

```javascript
import { _ } from "gridjs-react";  

```

--------------------------------

### Import Grid.js and Chartist Libraries

Source: https://gridjs.io/docs/examples/stock-market

Import necessary components from Grid.js and the Chartist library for chart rendering.

```javascript
import { Grid, h, createRef as gCreateRef } from "gridjs";  
import Chartist from 'chartist';  
```

--------------------------------

### Extended Grid.js Vue Component Configuration

Source: https://gridjs.io/docs/integrations/vue

Configure advanced Grid.js options within a Vue component, including data sources (rows, from, server), and various features like pagination, search, and sorting. This example shows how to bind numerous Grid.js properties to Vue data properties.

```html
<template>  
  <grid  
    :auto-width="autoWidth"  
    :cols="cols"  
    :from="from"  
    :language="language"  
    :pagination="pagination"  
    :rows="rows"  
    :search="search"  
    :server="server"  
    :sort="sort"  
    :width="width"  
  ></grid>  
</template>  

<script>  
  import Grid from 'gridjs-vue'  
  
  export default {  
    name: 'MyTable',  
    components: {  
      Grid  
    },  
    data() {  
      return {  
        // REQUIRED:  
  
        // An array containing strings of column headers  
        cols: ['col 1', 'col 2'],  
  
        // AND EITHER an array containing row data  
        rows: [  
          ['row 1 col 1', 'row 1 col 2'],  
          ['row 2 col 1', 'row 2 col 2']  
        ],  
  
        // OR a string of an HTML table selector to import  
        from: '.my-element'  
  
        // OR a server settings object  
        server() ({  
          url: 'https://api.com/search?q=my%20query',  
          then: res => res.data.map(col => [col1.data, col2.data]),  
          handle: res => res.status === 404  
            ? { data: [] } : res.ok  
            ? res.json() : new Error('Something went wrong')  
        }),  
  
        // OPTIONAL:  
  
        // Boolean to automatically set table width  
        autoWidth: true / false,  
  
        // Localization dictionary object  
        language: {},  
  
        // Boolean or pagination settings object  
        pagination: true / false || {},  
  
        // Boolean or search settings object  
        search: true / false || {},  
  
        // Boolean or sort settings object  
        sort: true / false || {},  
  
        // String with name of theme or 'none' to disable  
        theme: 'mermaid',  
  
        // String with css width value  
        width: '100%',  
      }  
    }  
  }  
</script>  

```

--------------------------------

### Add a Plugin to Grid.js

Source: https://gridjs.io/docs/plugins/writing-plugin

Instantiate a Grid.js instance and add your custom plugin to the header.

```javascript
function MyPlugin () {
  return h('h1', {}, 'Hello World!');
}
  
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'],
  ]
});
  
grid.plugin.add({
  id: 'myplugin',
  component: MyPlugin,
  position: PluginPosition.Header,
});

```

--------------------------------

### Full Configuration with Server-side Search

Source: https://gridjs.io/docs/server-side

Combines server-side data fetching with server-side search functionality. The search plugin refines the base URL with the user's keyword.

```javascript
const grid = new Grid({
  search: {
    server: {
      url: (prev, keyword) => `${prev}?search=${keyword}`
    }
  },
  columns: ['Title', 'Director', 'Producer'],
  server: {
    url: 'https://swapi.dev/api/films/',
    then: data => data.results.map(movie => [movie.title, movie.director, movie.producer])
  }
});

```

--------------------------------

### Link Grid.js Mermaid Theme CSS via jsdelivr

Source: https://gridjs.io/docs/install

Link the mermaid theme CSS file for Grid.js from the jsdelivr CDN.

```html
<link href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />  

```

--------------------------------

### Enable Pagination

Source: https://gridjs.io/docs/examples/pagination

Enable default pagination by setting `pagination: true` in the Grid configuration. This will use the default limit of 10 items per page.

```javascript
const grid = new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  pagination: true,
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444']
  ]
});
```

--------------------------------

### Update Grid Configuration

Source: https://gridjs.io/docs/examples/hello-world

This snippet shows how to update an existing Grid.js instance's configuration, specifically adding column definitions after initial data loading. Useful for dynamic updates.

```javascript
const grid = new Grid({
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444']
  ]
}).updateConfig({
  columns: ['Name', 'Email', 'Phone Number'],
});
```

--------------------------------

### Adding a Plugin to Grid.js Instance

Source: https://gridjs.io/docs/plugins/basics

Demonstrates how to add a custom plugin to a Grid.js instance using the plugin.add() method. The 'id', 'component', and 'position' are mandatory fields.

```javascript
grid.plugin.add({
  id: 'myplugin',
  component: MyPlugin,
  position: PluginPosition.Header,
});
```

--------------------------------

### Browser JavaScript Initialization

Source: https://gridjs.io/docs/hello-world

Instantiate the Grid.js Grid class in your JavaScript file to render a table.

```javascript
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"));

```

--------------------------------

### Render DataGrid with Custom View

Source: https://gridjs.io/docs/integrations/laravel

Render the DataGrid in a controller using a custom view. Pass the desired view name to the 'render' method.

```php
public function index(CategoriesDataGrid $dataGrid, Request $request)  
{
    return $dataGrid->render('admin.common.index');
}

```

--------------------------------

### Render Default DataGrid View

Source: https://gridjs.io/docs/integrations/laravel

Render the DataGrid in a controller using the default view. The 'render' method without arguments uses the default view path.

```php
public function index(CategoriesDataGrid $dataGrid, Request $request)  
{
    return $dataGrid->render();
}

```

--------------------------------

### Enable Server-Side Search

Source: https://gridjs.io/docs/examples/server-side-search

Configure the `server` option within the `search` definition to enable server-side search. The `url` function is used to construct the search query URL based on the previous URL and the search keyword. The `server.url` and `server.then` options are used to fetch and process data from the API.

```javascript
const grid = new Grid({
  pagination: true,
  search: {
    server: {
      url: (prev, keyword) => `${prev}?search=${keyword}`
    }
  },
  columns: ['Title', 'Director', 'Producer'],
  server: {
    url: 'https://swapi.dev/api/films/',
    then: data => data.results.map(movie => [movie.title, movie.director, movie.producer])
  }
});
```

--------------------------------

### Include Grid.js UMD Format via unpkg

Source: https://gridjs.io/docs/install

Include the UMD (Universal Module Definition) format of Grid.js directly via a script tag from unpkg.

```html
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>  

```

--------------------------------

### Import Emotion for CSS-in-JS

Source: https://gridjs.io/docs/examples/css-in-js

Import the 'css' function from the '@emotion/css' library to enable CSS-in-JS styling.

```javascript
import { css } from '@emotion/css';
```

--------------------------------

### Basic Server-side Data Fetching

Source: https://gridjs.io/docs/server-side

Configure the Grid.js instance to pull data from a server API. Specify the data source URL and a `then` function to parse the results.

```javascript
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]
    )
  } 
});

```

--------------------------------

### Async Data Loading with Promise and setTimeout

Source: https://gridjs.io/docs/examples/import-async

Use an async function with `Promise` and `setTimeout` to simulate fetching data after a delay. This is useful for external HTTP calls.

```javascript
const grid = new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  data: () => {
    return new Promise(resolve => {
      setTimeout(() =>
        resolve([
          ['John', 'john@example.com', '(353) 01 222 3333'],
          ['Mark', 'mark@gmail.com', '(01) 22 888 4444']
        ]), 1000);
    });
  }
});
```

--------------------------------

### Define a Plugin using JSX

Source: https://gridjs.io/docs/plugins/writing-plugin

Alternatively, use JSX syntax to define your plugin component if your bundler supports Preact JSX.

```javascript
function MyPlugin () {  
  return <h1>Hello World!</h1>;  
}  
```

--------------------------------

### Node.js Module Import

Source: https://gridjs.io/docs/hello-world

Import Grid.js and its theme CSS when using it as a Node.js module.

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

```

--------------------------------

### Enable Basic Search in Grid.js

Source: https://gridjs.io/docs/config/search

Enable the global search plugin by setting the `search` option to `true` in the Grid.js configuration. This is the simplest way to add search functionality to your grid.

```javascript
new Grid({
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',
      '(01) 22 888 4444'],
    ['Eoin', 'eo3n@yahoo.com',
      '(05) 10 878 5554'],
    ['Nisen', 'nis900@gmail.com',
      '313 333 1923']
  ],
  search: true
});
```

--------------------------------

### Using html function in Data and Formatters

Source: https://gridjs.io/docs/examples/html-cells

Demonstrates using the `html` function to format cell data and create custom cell content, including links.

```javascript
const grid = new Grid({
  columns: [
      {
        name: 'Name',
        formatter: (cell) => html(`<b>${cell}</b>`)
      },
      'Email',
      {
        name: 'Actions',
        formatter: (_, row) => html(`<a href='mailto:${row.cells[1].data}'>Email</a>`)
      },
   ],
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
    null
  ])
});
```

--------------------------------

### Format Cell Content with HTML

Source: https://gridjs.io/docs/examples/cell-formatting

Demonstrates adding HTML content to cells. Refer to the 'Populating cells with HTML' documentation for more details.

```javascript
const grid = new Grid({
  columns: [
    'Name',
    'Email'
  ],
  data: [
    ['<p>Hello</p>', '<a href="#">Link</a>']
  ]
});
```

--------------------------------

### Import JSON with Explicit Column IDs

Source: https://gridjs.io/docs/examples/import-json

Use this when you need to explicitly define column IDs that match your JSON keys. Ensure each column has a unique 'id'.

```javascript
const grid = new Grid({
  columns: [{ id: 'name', name: 'Name' }, { id: 'email', name: 'Email' }, { id: 'phoneNumber', name: 'Phone Number' }],
  data: [
    { name: 'John', email: 'john@example.com', phoneNumber: '(353) 01 222 3333' },
    { name: 'Mark', email: 'mark@gmail.com', phoneNumber: '(01) 22 888 4444' },
  ]
});
```

--------------------------------

### Include Grid.js UMD Format via jsdelivr

Source: https://gridjs.io/docs/install

Include the UMD format of Grid.js using a script tag from the jsdelivr CDN.

```html
<script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>  

```

--------------------------------

### Load Data from HTML Table with React

Source: https://gridjs.io/docs/examples/from

Use this snippet to initialize Grid.js from an existing HTML table within a React component. Ensure the table element and the grid container have refs assigned.

```javascript
function () { const tableRef = useRef(null); const wrapperRef = useRef(null); useEffect(() => { const grid = new 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>john@example.com</td> </tr> <tr> <td>Mike</td> <td><b>mike@example.com</b></td> </tr> </tbody> </table> <div ref={wrapperRef} /> </> ); }
```

--------------------------------

### Custom HTTP Client with XMLHttpRequest

Source: https://gridjs.io/docs/examples/custom-http-client

Implement a custom HTTP client using `XMLHttpRequest` to fetch data for Grid.js. This approach allows you to control the request and response handling, ensuring the output conforms to the `StorageResponse` format.

```javascript
const grid = new Grid({
  columns: ['Name', 'Language', 'Released At', 'Artist'],
  server: {
    url: 'https://api.scryfall.com/cards/search?q=Inspiring',
    data: (opts) => {
      return new Promise((resolve, reject) => {
        // let's implement our own HTTP client
        const xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState === 4) {
            if (this.status === 200) {
              const resp = JSON.parse(this.response);
 
              // make sure the output conforms to StorageResponse format: 
              // https://github.com/grid-js/gridjs/blob/master/src/storage/storage.ts#L21-L24
              resolve({
                data: resp.data.map(card => [card.name, card.lang, card.released_at, card.artist]),
                total: resp.total_cards,
              });
            } else {
              reject();
            }
          }
        };
        xhttp.open("GET", opts.url, true);
        xhttp.send();
      });
    }
  },
  pagination: {
    limit: 5
  }
});
```

--------------------------------

### Import Server-Side Data

Source: https://gridjs.io/docs/examples/server

Use the `server` property to load data from a remote URL and process it using the `then` function. This is useful for populating tables with dynamic content from an API.

```javascript
const grid = new Grid({
  columns: ['Name', 'Language', 'Released At', 'Artist'],
  server: {
    url: 'https://api.scryfall.com/cards/search?q=Inspiring',
    then: data => data.data.map(card => [card.name, card.lang, card.released_at, card.artist])
  }
});
```

--------------------------------

### Enable Sorting for All Columns

Source: https://gridjs.io/docs/config/sort

To enable sorting for all columns in the grid, set the 'sort' configuration option to true.

```javascript
new Grid({
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444'],
    ['Eoin', 'eo3n@yahoo.com',   '(05) 10 878 5554'],
    ['Nisen', 'nis900@gmail.com',   '313 333 1923']
  ],
  sort: true
});
```

--------------------------------

### Rendering HTML in a Cell with Styling

Source: https://gridjs.io/docs/examples/html-cells

Shows how to render custom HTML content with inline styling directly within a data cell. Be cautious of XSS attacks and sanitize inputs.

```javascript
const grid = new Grid({
  columns: [
    'Name',
    'Email',
    'Actions',
  ],
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
    html(
      "<div style='padding: 2px; border: 1px solid #ccc;border-radius: 4px;'>" +
        "<center>hello!</center>" +
      "</div>"
    )
  ]),
  search: true
});
```

--------------------------------

### Async Data Fetching with Loading State

Source: https://gridjs.io/docs/examples/loading-state

Use an async function for the 'data' option to enable the loading state. The loading bar appears while the promise resolves. This is useful for simulating XHR calls to a server.

```javascript
const grid = new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  sort: true,
  search: true,
  data: () => {
    return new Promise(resolve => {
      setTimeout(() =>
        resolve([
          ['John', 'john@example.com', '(353) 01 222 3333'],
          ['Mark', 'mark@gmail.com', '(01) 22 888 4444']
        ]), 2000);
    });
  }
});
```

--------------------------------

### Include jQuery and gridjs-jquery via CDN

Source: https://gridjs.io/docs/integrations/jquery

Include these scripts and the stylesheet in your HTML's head tag to use the jQuery wrapper.

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

```

--------------------------------

### Server-Side Pagination Configuration

Source: https://gridjs.io/docs/examples/server-side-pagination

Configure Grid.js for server-side pagination by specifying the server URL and data transformation. The `total` property is crucial for the pagination to function correctly.

```javascript
const grid = new Grid({
  columns: ['Pokemon', 'URL'],
  pagination: {
    limit: 5,
    server: {
      url: (prev, page, limit) => `${prev}?limit=${limit}&offset=${page * limit}`
    }
  },
  server: {
    url: 'https://pokeapi.co/api/v2/pokemon',
    then: data => data.results.map(pokemon => [
      pokemon.name,
      html(`<a href='${pokemon.url}'>Link to ${pokemon.name}</a>`)
    ]),
    total: data => data.count
  }
});
```

--------------------------------

### Include Grid.js ES Module in Browser via unpkg

Source: https://gridjs.io/docs/install

Include Grid.js as an ES module from unpkg. This method allows importing specific components like Grid and html.

```html
<script type="module">  
    import {  
        Grid,  
        html  
    } from "https://unpkg.com/gridjs?module";  
</script>  

```

--------------------------------

### Advanced Column Definition with TColumn Objects

Source: https://gridjs.io/docs/config/columns

Configure columns with detailed properties like sorting and width using TColumn objects.

```javascript
new Grid({
  columns: [{
    name: "Name",
    sort: true,
  }, {
    name: "Email"
  }, {
    name: "Phone Number",
    width: '50%'
  }]
});
```

--------------------------------

### Import RowSelection Plugin (ES Module)

Source: https://gridjs.io/docs/plugins/selection

Import the RowSelection plugin using ES module syntax for use in your project.

```javascript
import { RowSelection } from "gridjs/plugins/selection";  
```

--------------------------------

### Importing a Locale

Source: https://gridjs.io/docs/localization/locales

Import a specific language file from the gridjs/l10n module. This is the first step to enable localization.

```javascript
import { frFR } from "gridjs/l10n";
```

--------------------------------

### Importing html function

Source: https://gridjs.io/docs/examples/html-header-cells

Import the `html` function from the gridjs library to enable HTML rendering in header cells.

```javascript
import { Grid, html } from "gridjs";  
```

--------------------------------

### Convert HTML Table to Grid.js with jQuery

Source: https://gridjs.io/docs/integrations/jquery

Select an HTML table using a jQuery selector and call the Grid function to convert it into a Grid.js instance. All Grid.js configurations can be passed.

```javascript
$("table#myTable").Grid();  

```

--------------------------------

### Server-Side Data Loading with Fetch API

Source: https://gridjs.io/docs/config/server

Configure Grid.js to fetch data from a remote URL. Use the 'server' option with 'url', 'then', and 'handle' for custom data processing and response handling.

```javascript
new Grid({
  columns: ['Name', 'Language', 'Released At', 'Artist'],
  server: {
    url: 'https://api.scryfall.com/cards/search?q=Inspiring',
    then: data => data.data.map(card => [card.name, card.lang, card.released_at, card.artist]),
    handle: (res) => {
      // no matching records found
      if (res.status === 404) return {data: []};
      if (res.ok) return res.json();
        
      throw Error('oh no :(');
    },
  }
});
```

--------------------------------

### Grid.js Column Formatter with HTML

Source: https://gridjs.io/docs/integrations/angular

Demonstrates using the `html` function within a column formatter to render HTML content, such as a mailto link, based on row data.

```typescript
{
    name: 'Email',
    formatter: (_, row) => html(
        `<a href='mailto:${row.cells[1].data}'>${row.cells[1].data}</a>`
      )
  }

```

--------------------------------

### Parse XML with Grid.js Server Handler

Source: https://gridjs.io/docs/examples/import-xml

Use this configuration to fetch XML data from a URL and parse it using the DOMParser. The 'handle' function intercepts the response, and the 'then' function processes the parsed XML.

```javascript
const grid = new Grid({
  sort: true,
  search: true,
  pagination: true,
  columns: ['Location', 'Change Frequency', 'Priority'],
  server: {
    url: 'https://gridjs.io/sitemap.xml',
    handle: (res) => {
      return res.text().then(str => (new window.DOMParser()).parseFromString(str, "text/xml"));
    },
    then: data => {
      return Array.from(data.querySelectorAll('url'))
        .map(row => [
          row.querySelector('loc').innerHTML,
          row.querySelector('changefreq').innerHTML,
          row.querySelector('priority').innerHTML,
        ]);
    }
  }
});
```

--------------------------------

### Default Grid.js Options for Vue

Source: https://gridjs.io/docs/integrations/vue

View the default configuration options for the Grid.js Vue component. These settings are applied if not explicitly overridden in your component.

```json
{
  "autoWidth": true,
  "cols": [""],
  "from": undefined,
  "language": undefined,
  "pagination": false,
  "rows": undefined,
  "search": false,
  "server": undefined,
  "sort": false,
  "theme": "mermaid",
  "width": "100%"
}

```

--------------------------------

### Import h from Grid.js

Source: https://gridjs.io/docs/examples/virtual-dom

Import the 'h' function from the 'gridjs' package to enable Preact's Virtual DOM rendering.

```javascript
import { h } from "gridjs";  
```

--------------------------------

### Update Grid.js Config and Force Render

Source: https://gridjs.io/docs/examples/force-render

Use `updateConfig()` to modify the grid's settings and `forceRender()` to apply changes. This is useful for dynamically updating table data or features after initial rendering.

```javascript
function () {
  const wrapper = useRef(null);
  useEffect(() => {
    // initial setup
    const grid = new Grid({
      columns: ['Name', 'Email', 'Phone Number'],
      data: [
        ['John', 'john@example.com', '(353) 01 222 3333'],
      ]
    }).render(wrapper.current);
    
    setTimeout(() => {
      // lets update the config
      grid.updateConfig({
        search: true,
        data: [
          ['John', 'john@example.com', '(353) 01 222 3333'],
          ['Mark', 'mark@gmail.com',   '(01) 22 888 4444'],
        ]
      }).forceRender();
    }, 2000);
  }, []);
  
  return (
    <div ref={wrapper} />
  );
}
```

--------------------------------

### Define Table Data with Array of Objects

Source: https://gridjs.io/docs/config/data

Provide data as an array of objects for easier column mapping by property name. Each object represents a row, with keys corresponding to column headers.

```javascript
new Grid({
  data: [
    { name: 'John', email: 'john@example.com' },
    { name: 'Mark', email: 'mark@gmail.com' },
    { name: 'Eoin', email: 'eo3n@yahoo.com' },
    { name: 'Nisen', email: 'nis900@gmail.com' }
  ]
});

```
Tokens:
Raw