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

--dsg-border-color:

--dsg-selection-border-color:

--dsg-selection-border-radius:

--dsg-selection-border-width:

--dsg-selection-background-color:

--dsg-selection-disabled-border-color:

--dsg-selection-disabled-background-color:

--dsg-corner-indicator-width:

--dsg-header-text-color:

--dsg-header-active-text-color:

--dsg-cell-background-color:

--dsg-cell-disabled-background-color:

--dsg-transition-duration:

--dsg-expand-rows-indicator-width:

--dsg-scroll-shadow-width:

--dsg-scroll-shadow-color:

:root {
}

Active

1

2

3

4

5

6

rows

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.