Styling

You can very easily customize the way DSG looks using CSS.

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

First name

Last name

Integer

Float

Percentage

Date

Job

Job area

1

2

3

4

5

6

7

8

rows

Override more specific CSS

If custom properties do not allow you to customize what you need, you can manually override any CSS classes. All classes are prefixed with .dsg-. See style reference.