Loading...

Table Grid Js

Basic Table

The Basic Table example using Grid.js provides a simple and interactive table with sorting, searching, and pagination features. It can be easily customized with additional options.

Table With Sorting

The Table With Sorting example using Grid.js allows users to sort table columns by clicking on the headers, making data organization easier and more efficient. You can enable sorting using the config option: sort: true.

Table With Pagination

The Table With Pagination example using Grid.js helps manage large datasets by displaying a limited number of rows per page. You can enable pagination using the config option: pagination: { limit: 10 }.

Table With Search

The Table With Search example using Grid.js allows users to quickly find data by entering keywords. Enable search using the config option: search: true.

Table Loading

The Table Loading example in Grid.js displays a loading state while fetching data. Use the config option: loading: true to enable it.

Fixed Header

The Fixed Header example in Grid.js keeps the table header visible while scrolling. Use the config option: fixedHeader: true to enable it.

Preview Settings

Theme Layouts

Defines the admin panel's layout style, allowing you to choose from different design options.

Color Mode

Choose if app's appearance should be light or dark, or follow your computer's settings.

RTL Mode

Toggle between LTR and RTL layouts to support different language directions.

Preset Themes

Choose a preset theme from out theme library.

Sidebar Colors

Sets the sidebar color scheme. Options include light, dark, or gradient styles.

Navbar Positions Options

Sets the navbar position: sticky, static, or hidden.

Navbar Type Options

Sets the navbar style: default, dark, transparent, or glass.

Font Options

Sets the fonts for headings and body text.

Font Size Options

Sets the font size: sm, md, or lg.

Rounded Options

Sets the border radius size: xs, sm, md, lg, or xl.

Container Options

Defines the container style: fluid (full-width) or boxed (fixed width).

Loader Options

Sets the page loader visibility: hidden or visible.