@migov/digital-guidelines-ag-grid-theme
v0.0.1-dev.0c84165f3bd7549e13f9fd91ad1da20c4affe5af.0
Published
Custom CSS overrides and theme for AG Grid
Readme
@migov/digital-guidelines-ag-grid-theme
AG Grid theme and custom CSS overrides for Michigan Digital Guidelines.
Installation
npm install @migov/digital-guidelines-ag-grid-themeNote:
ag-grid-communityis a peer dependency and must be installed separately.
Usage
Theme (recommended)
Import and use the pre-built AG Grid theme:
import { DgAgTheme } from '@migov/digital-guidelines-ag-grid-theme';CSS
Import CSS overrides:
@import '@migov/digital-guidelines-ag-grid-theme/css';Examples
HTML (Vanilla JavaScript)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Digital Guidelines AG Grid Theme Example</title>
</head>
<body>
<div id="myGrid" style="height: 400px; width: 100%;"></div>
<script type="module">
import { ModuleRegistry, AllCommunityModule, createGrid } from 'ag-grid-community';
import { DgAgTheme } from '@migov/digital-guidelines-ag-grid-theme';
ModuleRegistry.registerModules([AllCommunityModule]);
const gridOptions = {
theme: DgAgTheme,
columnDefs: [
{ field: 'county' },
{ field: 'established' },
{ field: 'population' },
{ field: 'area' },
],
rowData: [
{ county: 'Alcona', established: '1840', population: 10556, area: 675 },
{ county: 'Alger', established: '1885', population: 8641, area: 915 },
{ county: 'Allegan', established: '1831', population: 123188, area: 825 },
],
};
createGrid(document.getElementById('myGrid'), gridOptions);
</script>
</body>
</html>React
import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
import { AgGridReact } from 'ag-grid-react';
import { DgAgTheme } from '@migov/digital-guidelines-ag-grid-theme';
ModuleRegistry.registerModules([AllCommunityModule]);
const columnDefs = [
{ field: 'county' },
{ field: 'established' },
{ field: 'population' },
{ field: 'area' },
];
const rowData = [
{ county: 'Alcona', established: '1840', population: 10556, area: 675 },
{ county: 'Alger', established: '1885', population: 8641, area: 915 },
{ county: 'Allegan', established: '1831', population: 123188, area: 825 },
];
function MyGrid() {
return (
<div style={{ height: '400px', width: '100%' }}>
<AgGridReact
theme={DgAgTheme}
columnDefs={columnDefs}
rowData={rowData}
/>
</div>
);
}
export default MyGrid;Angular
// app.component.ts
import { Component } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import { ModuleRegistry, AllCommunityModule, ColDef } from 'ag-grid-community';
import { DgAgTheme } from '@migov/digital-guidelines-ag-grid-theme';
ModuleRegistry.registerModules([AllCommunityModule]);
@Component({
selector: 'app-root',
standalone: true,
imports: [AgGridAngular],
template: `
<ag-grid-angular
style="height: 400px; width: 100%;"
[theme]="theme"
[columnDefs]="columnDefs"
[rowData]="rowData"
/>
`,
})
export class AppComponent {
theme = DgAgTheme;
columnDefs: ColDef[] = [
{ field: 'county' },
{ field: 'established' },
{ field: 'population' },
{ field: 'area' },
];
rowData = [
{ county: 'Alcona', established: '1840', population: 10556, area: 675 },
{ county: 'Alger', established: '1885', population: 8641, area: 915 },
{ county: 'Allegan', established: '1831', population: 123188, area: 825 },
];
}