Vue Data GridCustomising Inputs & Widgets
Style text inputs, checkboxes, toggle buttons and range sliders.
Styling Text Inputs
Text inputs can be styled with a combination of CSS variables and selectors:
.ag-theme-quartz {
--ag-borders-input: dotted 2px;
--ag-input-border-color: orange;
}
.ag-theme-quartz .ag-text-field-input {
background-color: rgb(255, 209, 123); /* light orange */
}
.ag-theme-quartz .ag-text-field-input::placeholder {
color: rgb(155, 101, 1); /* darker orange */
}
The CSS variables relevant to styling text inputs are:
Styling Checkboxes
The default styles of the grid disable the browser's native checkbox widget and create a custom appearance using icon fonts (see below for how to disable this).
See the Custom Icons documentation for how to replace the checkbox icons - the icons used are checkbox-checked
, checkbox-unchecked
, checkbox-indeterminate
.
The colours can be controlled using the following CSS Variables:
.ag-theme-quartz {
--ag-checkbox-background-color: yellow;
--ag-checkbox-checked-color: red;
--ag-checkbox-unchecked-color: darkred;
--ag-checkbox-indeterminate-color: grey;
}
Styling Radio Buttons
Radio Buttons, such as those in the chart settings UI, are specialised checkboxes. They respond to the same colour variables as demonstrated above. They use the radio-button-on
and radio-button-off
icons.
Styling Toggle Buttons
Toggle Buttons, such as the "Pivot Mode" toggle in the above example, are specialised checkboxes. They respond to the same checkbox colour variables. In addition, they expose a few more variables for advanced customisation:
Using Browser Native Checkboxes or Creating Your Own
The default styles in ag-grid.css
contain many CSS rules to implement the --ag-checkbox-*
and --ag-toggle-button-*
variables described above. If you want to use the browser's default UI or create your own then it's easier to start from a blank slate rather than attempting to override the default styles.
To achieve this, use the ag-grid-no-native-widgets.css
CSS file instead of ag-grid.css
.
Users of the Sass API can pass suppress-native-widget-styling: true
to accomplish this.