Styling
You can very easily customize the way DSG looks using CSS.
Custom classes
You can add custom css classes to:
- the grid,
- a row,
- a header cell,
- a cell of a column,
- or a cell of the grid.
Some even allow to specify a function instead of simply a string to dynamically apply a class based on the data:
<DataSheetGrid
rowClassName={({ rowIndex }) => hasError(rowIndex) ? 'row-error' : null }
/>
Custom properties
The easiest way is to use CSS custom properties.
Because of the way custom properties work, you can define them anywhere in your style. Note that all custom properties
are prefixed with --dsg-
.
At the :root level
If you want all the DSG of your app to have the same styling you can define the custom properties at the :root level.
:root {
--dsg-selection-border-color: tomato;
}
Using a class
If you need some DSG in your app to have a slightly different styling you can use CSS classes.
.my-class {
--dsg-selection-border-color: tomato;
}
<DataSheetGrid className="my-class" />
Using style
If you want to override a single DSG in your app you can directly use the style property.
<DataSheetGrid style={{ '--dsg-selection-border-color': 'tomato' }} />
Generator
:root {
}
Override more specific CSS
If custom properties do not allow you to customize what you need, you can manually override any CSS class.
All classes are prefixed with .dsg-
. See style reference.