React Data GridCustomising Inputs & Widgets

Style text inputs, checkboxes, toggle buttons and range sliders.

Styling Text Inputs

The grid exposes many theme parameters beginning input* for customising text input appearance. Search "input" in the "All Parameters" section of the Theme Builder or use typescript autocompletion in your IDE.

const myTheme = themeQuartz.withParams({
    inputBorder: { color: 'orange', style: 'dotted', width: 3 },
    inputBackgroundColor: 'rgb(255, 209, 123)', // light orange
    inputPlaceholderTextColor: 'rgb(155, 101, 1)', // darker orange
    inputIconColor: 'purple', // light orange
});

If there is no parameter for the effect that you want to achieve, you can use CSS selectors:

.ag-text-field-input {
    box-shadow: 0 0 10px orange;
}

Underlined Text Inputs

The default text input style is inputStyleBordered. The other provided input style is inputStyleUnderlined which produces a Material Design style underlined input. These are theme parts so you can swap them using theme.usePart() or create your own:

const myTheme = themeQuartz.withPart(inputStyleUnderlined);

inputStyleUnderlined supports all the same theme parameters but only applies border parameters to the bottom border so for example inputBorder and inputFocusBorder to style the underline in default and focus states.

Creating Your Own Text Input Styles

If you'd like to create your own input styles from scratch you can remove the existing inputStyle part, see Removing a Part.

Styling Checkboxes

The grid exposes many theme parameters beginning checkbox* for customising checkbox appearance. Search "checkbox" in the "All Parameters" section of the Theme Builder or use typescript autocompletion in your IDE.

const myTheme = themeQuartz.withParams({
    checkboxUncheckedBackgroundColor: 'yellow',
    checkboxUncheckedBorderColor: 'darkred',
    checkboxCheckedBackgroundColor: 'red',
    checkboxCheckedBorderColor: 'darkred',
    checkboxCheckedShapeColor: 'yellow',
    checkboxCheckedShapeImage: {
        svg: '<svg>... svg source code...</svg>',
    },
    checkboxIndeterminateBorderColor: 'darkred',
});

If there is no parameter for the effect that you want to achieve, you can use CSS selectors:

.ag-checkbox-input-wrapper {
    ... default styles ...
}
.ag-checkbox-input-wrapper.ag-checked {
    ... override default styles for 'checked' state ...
}
.ag-checkbox-input-wrapper.ag-indeterminate {
    ... override default styles for 'indeterminate' state ...
}

Changing Checkbox Icons

The example above uses checkboxCheckedShapeImage to replace the default check mark with a X symbol. By default, checkboxCheckedShapeImage provides only the shape of the check mark, and the color is replaced using the checkboxCheckedShapeColor parameter.

If you have SVG images containing their own color, this example demonstrates how to create a checkbox style with coloured SVG images. It removes the existing checkbox styles using theme.removePart() and adds new styles with CSS:

Creating Your Own Checkbox Styles

If you'd like to create your own checkbox styles from scratch you can remove the existing checkboxStyle part, see Removing a Part.

Styling Radio Buttons

Radio Buttons, such as those in the chart settings UI, are specialised checkboxes. They have their corner radius overridden to be 100% to create a round shape, and get their checked shape from the radioCheckedShapeImage theme parameter.

Styling Toggle Buttons

Toggle Buttons, such as the "Pivot Mode" toggle in the example below, are styled using theme parameters beginning toggleButton*.

const myTheme = themeQuartz.withParams({
    toggleButtonWidth: 50,
    toggleButtonHeight: 30,
    toggleButtonSwitchInset: 10,
    toggleButtonOffBackgroundColor: 'darkred',
    toggleButtonOnBackgroundColor: 'darkgreen',
    toggleButtonSwitchBackgroundColor: 'yellow',
});

If there is no parameter that achieves the effect you want, you can use CSS selectors:

.ag-toggle-button-input-wrapper {
    ... background styles ...
}
.ag-toggle-button-input-wrapper.ag-checked {
    ... override background styles for 'checked' state ...
}
.ag-toggle-button-input-wrapper::before {
    ... sliding switch styles ...
}
.ag-toggle-button-input-wrapper.ag-checked::before {
    ... override sliding switch styles for 'checked' state ...
}