Tzezar's Datagrid
Beta
Customization
Datagrid was created to be as flexible and powerful as possible.
Styling
Every predefined component can be styled via class.
For example passing
<Datagrid.Cell class='bg-red-500' />to a cell component will set the background color to red.
<Datagrid.Datagrid class={{table: "bg-blue-500"}} />to a datagrid component will set the background color to blue.
Important
As you can see in the example above class can take a string or an object for more complicated components. Dont worry, you get intelliSense.
Building Custom Components
Every part of the data grid is customizable to fit your specific needs.
The best approach, in my opinion, is to extend an existing pre-made component and adapt it to your requirements. However, if you need unique functionality, building a custom component from scratch is also a valid option.
Default Datagrid Slots
By default the datagrid has the following slots:
- head
- body
- pagination
- topBar
- loadingIndicator
- dataIndicator
This provides default placement of all the components, but again as said before: feel free to extend and adapt them to your needs.
Important
In some cases you dont event need to alter the default slots to create custom layout. Check Example Advanced for more details and example of how to render custom pagination without altering datagrid default slots.