Style the Filters Tool Panel and Columns Tool Panel.
Styling the Sidebar Area Copy Link
The sidebar is a tabbed container for opening and switching between tool panels. The grid exposes many theme parameters for customising the sidebar and tabbed buttons. For the full list, see the Sidebar section of the parameters reference.
const myTheme = themeQuartz.withParams({
sideBarBackgroundColor: '#08f3',
sideButtonBarBackgroundColor: '#fff6',
sideButtonBarTopPadding: 20,
sideButtonSelectedUnderlineColor: 'orange',
sideButtonTextColor: '#0009',
sideButtonHoverBackgroundColor: '#fffa',
sideButtonSelectedBackgroundColor: '#08f1',
sideButtonHoverTextColor: '#000c',
sideButtonSelectedTextColor: '#000e',
sideButtonSelectedBorder: false,
});To create effects beyond what is possible with theme parameters, use CSS selectors:
.ag-side-button.ag-selected {
text-shadow: 0 0 8px #039;
font-weight: 500;
}import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
SideBarDef,
Theme,
enableDevValidations,
themeQuartz,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([AllEnterpriseModule]);
const myTheme = themeQuartz.withParams({
sideBarBackgroundColor: "#08f3",
sideButtonBarBackgroundColor: "#fff6",
sideButtonBarTopPadding: 20,
sideButtonSelectedUnderlineColor: "orange",
sideButtonTextColor: "#0009",
sideButtonHoverBackgroundColor: "#fffa",
sideButtonSelectedBackgroundColor: "#08f1",
sideButtonHoverTextColor: "#000c",
sideButtonSelectedTextColor: "#000e",
sideButtonSelectedBorder: false,
});
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:theme="theme"
:defaultColDef="defaultColDef"
:sideBar="true"
:rowData="rowData"></ag-grid-vue>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
const columnDefs = ref<ColDef[]>([
{
field: "athlete",
minWidth: 170,
enableRowGroup: true,
enablePivot: true,
},
{ field: "age", enableRowGroup: true, enablePivot: true },
{ field: "country", enableRowGroup: true, enablePivot: true },
{ field: "year", enableRowGroup: true, enablePivot: true },
{ field: "date" },
{ field: "sport", enableRowGroup: true, enablePivot: true },
{ field: "gold", enableValue: true },
{ field: "silver", enableValue: true },
{ field: "bronze", enableValue: true },
{ field: "total", enableValue: true },
]);
const theme = ref<Theme | "legacy">(myTheme);
const defaultColDef = ref<ColDef>({
editable: true,
filter: true,
});
const rowData = ref<IOlympicData[]>(null);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
const updateData = (data) => (rowData.value = data);
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data) => updateData(data));
};
return {
gridApi,
columnDefs,
theme,
defaultColDef,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
.ag-side-button.ag-selected {
text-shadow: 0 0 8px #039;
font-weight: 500;
}
Styling the Columns Tool Panel Copy Link
The --ag-column-select-indent-size CSS Variable sets the indent of each column group within the columns tool panel. For further customisation, use CSS selectors.
This example demonstrates changing the child indent for grouped columns and the style of the column drop component in the Row Groups area:
const myTheme = themeQuartz.withParams({
columnSelectIndentSize: 40,
columnDropCellBackgroundColor: 'purple',
columnDropCellTextColor: 'white',
columnDropCellDragHandleColor: 'white',
columnDropCellBorder: { color: 'yellow', style: 'dashed', width: 2 },
});.ag-column-drop-cell {
box-shadow: 0 0 4px purple;
}
/* The different sections within the columns tool panel use
flex sizing to adapt to vertical space, use min-height
and max-height to constrain their heights */
.ag-column-drop-vertical-rowgroup {
min-height: 120px;
}
.ag-column-drop-vertical-aggregation {
min-height: 90px;
}import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
SideBarDef,
Theme,
enableDevValidations,
themeQuartz,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([AllEnterpriseModule]);
const myTheme = themeQuartz.withParams({
columnSelectIndentSize: 40,
columnDropCellBackgroundColor: "purple",
columnDropCellTextColor: "white",
columnDropCellDragHandleColor: "white",
columnDropCellBorder: { color: "yellow", style: "dashed", width: 2 },
});
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:theme="theme"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:sideBar="sideBar"
:rowData="rowData"></ag-grid-vue>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
const theme = ref<Theme | "legacy">(myTheme);
const columnDefs = ref<(ColDef | ColGroupDef)[]>([
{
headerName: "Athlete",
children: [
{
field: "athlete",
minWidth: 170,
rowGroup: true,
enableRowGroup: true,
enablePivot: true,
},
{
field: "age",
rowGroup: true,
enableRowGroup: true,
enablePivot: true,
},
{ field: "country", enableRowGroup: true, enablePivot: true },
],
},
{
headerName: "Event",
children: [
{ field: "year", enableRowGroup: true, enablePivot: true },
{ field: "date" },
{ field: "sport", enableRowGroup: true, enablePivot: true },
],
},
{
headerName: "Medals",
children: [
{ field: "gold", enableValue: true },
{ field: "silver", enableValue: true },
{ field: "bronze", enableValue: true },
{ field: "total", enableValue: true },
],
},
]);
const defaultColDef = ref<ColDef>({
editable: true,
filter: true,
});
const sideBar = ref<SideBarDef | string | string[] | boolean | null>(
"columns",
);
const rowData = ref<IOlympicData[]>(null);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
const updateData = (data) => (rowData.value = data);
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data) => updateData(data));
};
return {
gridApi,
theme,
columnDefs,
defaultColDef,
sideBar,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
.ag-column-drop-cell {
box-shadow: 0 0 4px purple;
}
/* The different sections within the columns tool panel use
flex sizing to adapt to vertical space, use min-height
and max-height to constrain their heights */
.ag-column-drop-vertical-rowgroup {
min-height: 120px;
}
.ag-column-drop-vertical-aggregation {
min-height: 90px;
}