GridJS
A powerful data grid component that provides advanced table functionality with features like sorting, pagination, and custom column rendering, built on top of the Grid.js library.Basic Grid
The gridJS component can be created by calling the UI::gridJS() method.
GridJS Examples
Here are examples of different ways to use the GridJS component.Grid with Searchable Columns
Use the searchableColumns() method to make columns searchable.
Grid with Sortable Columns
Use the sort() method on columns to make them sortable.
Grid with Multiple Column Sorting
The setMultipleColumnSort() method enables sorting on multiple columns simultaneously.
Grid with Pagination
Use the setPagination() method with a Pagination object to enable pagination.
Grid with Custom Pagination Text
The Pagination class allows customizing the pagination text.
Grid with HTML Content
Use Column::html() to create columns that render HTML content.
Grid with Row Selection
Use Column::rowSelection() to add a selection column for row selection.
Grid with Action Column
Use Column::action() to add a column for row operations.
Grid with Visual Styling
The strippedRows() and hoverRows() methods add visual styling to the grid.
Grid with Custom Header Content
The setHeaderContent() method allows adding custom content above the grid.
API
The GridJS component extends fromHtmlElement so it has all its methods available.API PHP
API JS
Events
You can listen to events on the GridJS component using the bouion() method.Common alternative names: Data Table, Data Grid, Table Component, Interactive Table, Advanced Table
Types: Basic Grids, Sortable Grids, Paginated Grids, Selectable Grids, Remote Data Grids, Styled Grids
Principles
Data Organization
GridJS presents tabular data in an organized, structured format that makes complex information easily accessible and scannable.
Interactive Functionality
Through features like sorting, pagination, and selection, GridJS transforms static data into an interactive experience that enables users to explore and manipulate information.
Visual Clarity
Consistent styling, clear headers, and appropriate spacing create visual hierarchy that helps users understand and navigate complex datasets.
Anatomy
- Container
- Column Headers
- Rows
- Cells
- Pagination Controls
- Footer
The outer wrapper that holds the entire grid component
The top row containing column titles
The data rows containing cell values
Individual data elements within rows
Navigation elements for moving between pages of data
The bottom section containing pagination information and controls
Usage
Use GridJS for displaying and interacting with tabular data. It's particularly effective for data-heavy interfaces, administrative dashboards, data reports, and any situation where users need to explore, filter, or manipulate structured data. The component's rich feature set makes it suitable for both simple data displays and complex interactive data grids with advanced functionality.