Cell formatting
You can customize cells and format them at runtime using formatter property, it is also possible to add HTML content to cells (see examples below). In this example we added a custom text prefix to all cells in the first column, including HTML tag and class with a help of built-in gridjs.html() function and used that in formatter function or directly in data array.
Cell attributes
Add custom attributes to each cell (and header cell) of your table using the attributes config. This example adds data-field="name" to all cells of the "Name" column. You can also add custom ID or class name. Note - class attribute requires base gridjs-th class to keep the styling and optional gridjs-th-sort if sorting is enabled. See JS configuration of this grid for reference.
Row buttons
You can get access to the cell or the entire row using the formatter function. In this example, we are adding a button to each row which has an onClick handler function that can read the entire row. You can use either single button or a button group, and optionally disable sorting in the last column where you show action buttons. Buttons support plain text label and/or icons.
HTML in cells
In this example we added a simple mailto link to each row and inserted the link value from "Email" cell in each row. Note: using the html function can expose your application to XSS attacks. Make sure you understand the implications of using this function and always sanitize the user inputs before passing them to the html function
HTML in header
In this example we added icons to table header cells using name property. You can also create a virtual DOM and attach it to header cells. Note: using the html function can expose your application to XSS attacks. Make sure you understand the implications of using this function and always sanitize the user inputs before passing them to the html function
Activity
New notifications
James has completed the task Submit documents from Onboarding list
2 hours ago
Margo has added 4 users to Customer enablement channel
3 hours ago
Subscription #466573 from 10.12.2021 has been cancelled. Refund case #4492 created
4 hours ago
Older notifications
Nick requested your feedback and approval in support request #458
3 days ago
Mike added 1 new file(s) to Product management project
new_contract.pdf
112KB
1 day ago
All hands meeting will take place coming Thursday at 13:45.
2 days ago
Christine commented on your community post from 10.12.2021
2 days ago
HR department requested you to complete internal survey by Friday
3 days ago
Loading...
Demo configuration
Color mode
Direction
Layouts
Purchase Limitless