Vue Data GridCustomising Inputs & Widgets
Style text inputs, checkboxes, toggle buttons and range sliders.
Text inputs can be styled with a combination of CSS variables and selectors:
.ag-theme-alpine {
--ag-borders-input: dotted 2px;
--ag-input-border-color: orange;
}
.ag-theme-alpine .ag-text-field-input {
background-color: rgb(255, 209, 123); /* light orange */
}
.ag-theme-alpine .ag-text-field-input::placeholder {
color: rgb(155, 101, 1); /* darker orange */
}
The CSS variables relevant to styling text inputs are:
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-alpine {
--ag-checkbox-background-color: yellow;
--ag-checkbox-checked-color: red;
--ag-checkbox-unchecked-color: darkred;
--ag-checkbox-indeterminate-color: grey;
}
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.
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:
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.