Data Grid
Data Grid
A data grid built on top of AG Grid with Pit Viper styling. Use the pv-data-grid element on the grid container, along with the ag-theme-pv style.
This component requires the following JS assets to function properly. Read the documentation for information on how to import the assets for your application.
pit-viper.jsag-grid-enterprise.min.js(with a valid license key)
pv-data-grid abstracts a bit of the native AG Grid functionality, as it handles some things like icon styling and loading state by modifying the initial grid options.
The primary change is to avoid calling agGrid.createGrid(gridElement, gridOptions) when creating the grid, and instead call the web component method gridElement.createGrid(gridOptions) to create the grid while also applying the pv styling options.
If you need to use the native AG Grid functionality, you can the pv theme on its own by adding the ag-theme-pv class to the grid container. Note that this will require you to handle the loading state and icon styling yourself.
AG Grid has a lot of features and options, so be sure to refer to the docs.
If you need to add additional CSS styling (i.e for specific cells or for certain conditions), review the AG Grid documentation on cell component rendering, which will allow you to use additional pv classes as needed.
Example
A data grid with an example of how to initialize the grid using the component creation function. Make sure to provide the src for the loading image with the loading-img-src attribute.
HTML
<pv-data-grid id="example-grid" class="ag-theme-pv" loading-img-src="/path_to_loading_asset" style="height:500px;"></pv-data-grid>
<!-- import pit-viper.js and ag-grid-enterprise.js as described in the PV usage instructions -->
<script>
const EXAMPLE_ROW_DATA = [
{ code_type: "HCPCS", code: "0001U", rate: 381.6, provider_name: "Example Provider" },
{ code_type: "HCPCS", code: "0034U", rate: 245.5, provider_name: "Abrazo West" },
{ code_type: "HCPCS", code: "0035U", rate: 81.5, provider_name: "Healthcare Organization" },
{ code_type: "HCPCS", code: "", rate: 711.42, provider_name: "Medical Place" },
{ code_type: "MS-DRG", code: "100", rate: 1000.50, provider_name: "Hospitals Incorporated" },
{ code_type: "MS-DRG", code: "113", rate: 2250.72, provider_name: "" },
{ code_type: "HCPCS", code: "0035U", rate: 240, provider_name: "Abrazo West" },
{ code_type: "MS-DRG", code: "245", rate: 566.22, provider_name: "Hospitals Incorporated" },
];
const exampleGridOptions = {
columnDefs: [
{ field: "code_type", sortable: true, unSortIcon: true, headerName: "Code Type", flex: 1.5 },
{ field: "code", sortable: true, unSortIcon: true, flex: 1, filter: true, filterParams: {buttons: ['clear']} },
{ field: "rate",
filter: 'agNumberColumnFilter',
flex: 1,
tooltipValueGetter: () => "This is an example tooltip",
valueFormatter: (params) => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
}).format(params.value);
}, },
{ field: "provider_name", sortable: true, unSortIcon: true, headerName: "Provider Name", minWidth: 225, flex: 2 },
]
};
let gridApi;
function setLoading(value) {
gridApi.setGridOption("loading", value);
showData(!value);
}
function showData(value) {
if (value) {
const mockData = [...EXAMPLE_ROW_DATA, ...EXAMPLE_ROW_DATA, ...EXAMPLE_ROW_DATA].map((item, index) => ({
...item,
id: index,
}));
gridApi.setGridOption('rowData', mockData);
} else {
gridApi.setGridOption('rowData', []);
}
}
window.addEventListener('DOMContentLoaded', () => {
agGrid.LicenseManager.setLicenseKey("PROVIDE-AG-GRID-LICENSE-KEY-HERE");
const myGridElement = document.querySelector('#example-grid');
gridApi = myGridElement.createGrid(exampleGridOptions);
showData(true);
});
</script>Example
A data grid with row spanning, cell selection, and copy/paste enabled
HTML
<div class="doc-example">
<pv-data-grid id="example-grid-2" class="ag-theme-pv" loading-img-src="path_to_loading_asset" style="height:500px;"></pv-data-grid>
</div>
<!-- import pit-viper.js and ag-grid-enterprise.js as described in the PV usage instructions -->
<script>
const EXAMPLE_ROW_DATA_2 = [
{ code_type: "HCPCS", code: "0001U", rate: 381.6, provider_name: "Example Provider" },
{ code_type: "HCPCS", code: "0034U", rate: 245.5, provider_name: "Abrazo West" },
{ code_type: "HCPCS", code: "0035U", rate: 81.5, provider_name: "Healthcare Organization" },
{ code_type: "HCPCS", code: "", rate: 711.42, provider_name: "Medical Place" },
{ code_type: "MS-DRG", code: "100", rate: 1000.50, provider_name: "Hospitals Incorporated" },
{ code_type: "MS-DRG", code: "113", rate: 2250.72, provider_name: "" },
{ code_type: "HCPCS", code: "0035U", rate: 240, provider_name: "Abrazo West" },
{ code_type: "MS-DRG", code: "245", rate: 566.22, provider_name: "Hospitals Incorporated" },
];
const exampleGridOptions2 = {
columnDefs: [
{ field: "code_type",sortable: true, unSortIcon: true, headerName: "Code Type", flex: 1.5,
cellClassRules: {
"data-grid-cell-bottom-border": (params) => {
return params.node.rowIndex % 2 === 0;
},
}
},
{ field: "code", sortable: true, unSortIcon: true, flex: 1, filter: true, filterParams: {buttons: ['clear']} },
{ field: "rate",
filter: 'agNumberColumnFilter',
flex: 1,
tooltipValueGetter: () => "This is an example tooltip",
valueFormatter: (params) => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
}).format(params.value);
}, },
{ field: "provider_name", sortable: true, unSortIcon: true, headerName: "Provider Name", minWidth: 225, flex: 2 },
],
cellSelection: true,
suppressRowHoverHighlight: true,
copyHeadersToClipboard: true,
};
window.addEventListener('DOMContentLoaded', () => {
agGrid.LicenseManager.setLicenseKey("PROVIDE-AG-GRID-LICENSE-KEY-HERE");
const myGridElement = document.querySelector('#example-grid-2');
gridApi = myGridElement.createGrid(exampleGridOptions2, true);
const mockData = [...EXAMPLE_ROW_DATA_2, ...EXAMPLE_ROW_DATA_2, ...EXAMPLE_ROW_DATA_2].map((item, index) => ({
...item,
id: index,
}));
gridApi.setGridOption('rowData', mockData);
});
</script>