Grid Pro - Simple data
The examples below use JSX syntax. Real-world scenarios might be different, depending on the client application tooling and structure.
Set-up
::🎵The examples below are based on an example application called "alpha", so we refer to a design system called @genesislcap/alpha-design-system
, which has the prefix alpha
. In practice, you decide on the name and prefix of your design system, but it exposes the same API.
:::
import { provideDesignSystem, alphaAgGrid } from '@genesislcap/alpha-design-system';
import { foundationGridComponents } from '@genesislcap/grid-pro';
provideDesignSystem().register(alphaAgGrid(), foundationGridComponents);
Usage
In order to use the grid-pro with simple data, you need to provide at least these two options to the gridOptions
. The columnDefs
and rowData
:
columnDef
: a set of configuration for the given column. This option is the type ofColDef
. To check the available configuration, take a look here.rowData
: sets the data to be displayed in the grid.
The following example creates a grid-pro with three columns defined in columnDefs
and seven rows defined in rowData
:
function SimpleAgGrid(props) {
const columnDefs = [
{field: 'make'},
{field: 'model'},
{field: 'price'},
];
const rowData = [
{make: 'Toyota', model: 'Celica', price: 35000},
{make: 'Ford', model: 'Mondeo', price: 32000},
{make: 'Porsche', model: 'Boxter', price: 72000},
{make: 'Audi', model: 'A6', price: 80000},
{make: 'Renault', model: 'Clio', price: 20000},
{make: 'Chevrolet', model: 'Camaro', price: 40000},
{make: 'BMW', model: 'Z8', price: 90000}
];
const loadSimpleData = () => {
const grid = document.querySelector('alpha-grid-pro');
const gridOptions = {
defaultColDef: {
resizable: true,
filter: true,
},
columnDefs,
rowData,
};
grid.gridOptions = gridOptions;
}
const gridStyle = {
display: 'block',
height: '300px',
};
return (
<alpha-card>
<alpha-button onClick={() => loadSimpleData()}>Load Simple grid data</alpha-button>
<alpha-grid-pro style={gridStyle}></alpha-grid-pro>
</alpha-card>
);
}