grid.updateConfig({
search: true
}).forceRender();

The above code adds a search bar to the table, allowing users to enter keywords to narrow down the data.

Pagination

If you have a lot of data, pagination makes it easier to navigate the table. Grid.js makes it easy to set up pagination.

const grid = new Grid({
pagination: {
limit: 5
},
Other settings...
});

const grid = new Grid({
search: true,
sort: true,
pagination: {
limit: 5
},
columns: ["Name", "Age", "Occupation"],
server: {
url: 'https://example.com/api/data',
then: data => data.map(item => [item.name, item.age, item.occupation])
}
});

This code example implements the following functionality:

1. Search Functionality: Users can use the search bar at the top of the table to filter data instantly.

2. Sorting Functionality: By clicking on the header of each column, you can sort the data based on that column in ascending or descending order.

3. Pagination: Tables only display five rows of data at a time, and users can access other parts of the data using pagination controls.

4. Server-side integration: Retrieve data from remote APIs and integrate it into tables.

In this way, Grid.js allows you to combine multiple advanced features to achieve a user-friendly representation of your data.

data integration and manipulation - incorporation of external data sources

Grid.js allows for data integration and interactive data manipulation from external data sources. In this section, we'll explain how to ingest data from external APIs and customize the user interactions that come with it.

Data integration from external APIs

Grid.js allows you to retrieve data from external APIs and incorporate it into tables. This is very useful for dynamic web applications and real-time data display.

const grid = new Grid({
server: {
url: 'https://example.com/api/data',
then: data => data.map(item => [item.name, item.age, item.occupation])
},
columns: ["Name", "Age", "Occupation"]
});

grid.on('rowClick', (row) => {
alert(`Clicked row: ${JSON.stringify(row.cells[0].data)}`);
});

grid.on('cellClick', (cell) => {
console.log(`Clicked cell: ${JSON.stringify(cell.data)}`);
});

grid.on('rowClick', (row) => {
document.getElementById('details').textContent = `Selected: ${JSON.stringify(row.cells.map(cell => cell.data))}`;
});

const grid = new Grid({
columns: ["product name", "price", "category"],
server: {
url: 'https://example.com/api/products',
then: data => data.map(item => [item.name, item.price, item.category])
},
search: true,
sort: true
});

const grid = new Grid({
columns: ["student's name", "subject", "grade"],
data: [
Data array...
],
pagination: {
limit: 10
},
sort: true
});