Supercharging Your Tabular Views: AG Grid Powered by Sisense Compose SDK

[spuma]

Supercharging Your Tabular Views: AG Grid Powered by Sisense Compose SDK 

How to Build a Tabular View with Sisense Compose SDK and AG Grid
 

This guide walks through how to use Sisense Compose SDK's query hooks to power an AG Grid table component in React. We'll break down the steps, explain the code, and highlight the key functionalities of AG Grid.

Introduction

Tables are essential in BI applications for summarizing large datasets and providing users with a simple way to navigate, filter, and analyze data. AG Grid is an ideal solution for tabular views, offering robust capabilities like sorting, filtering, grouping, and data exporting. When combined with the Sisense Compose SDK, you can power real-time, data-driven applications that provide users with seamless, customizable data interactions.

In this example, we are using a sample eCommerce dataset, available through the Sisense Compose SDK free trial, to demonstrate how powerful this combination can be. Users can explore product sales by country, age range, and time period in a fully interactive grid.

AG Grid's advanced tabular capabilities include features like multi-level row grouping, custom value formatting, pivot mode for creating complex data hierarchies, and the ability to export data to formats like CSV. These features, when integrated with Sisense's query hooks and real-time data, enable developers to create highly dynamic dashboards where users can manipulate large datasets with ease.

This combination of Sisense Compose SDK and AG Grid empowers developers to create rich, interactive data experiences, allowing users to filter and manipulate data at granular levels, all while leveraging real-time querying powered by Sisense.

Step-by-Step Breakdown of the Code

1. Setting Up the Project

packages used:

npm install ag-grid-react ag-grid-community @mui/material @sisense/sdk-ui @sisense/sdk-data

1. Register AG Grid Modules

AG Grid uses modules to enable functionality like client-side row models, and sorting and filtering. We register the modules to be used within AG Grid:

import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";

These imports ensure that AG Grid is properly styled and functional.

1. Setting Up the Query with Sisense SDK

Sisense Compose SDK’s `useExecuteQuery` is used to fetch data from your data sources. The query can include dimensions and measures which AG Grid will render.

const queryProps = useMemo(() => ({
dataSource: DM.DataSource,
dimensions: [DM.Country.Country, DM.Commerce.AgeRange, DM.Commerce.Date.Years],
measures: [
measureFactory.sum(DM.Commerce.Revenue, "Total Revenue"),
measureFactory.sum(DM.Commerce.Quantity, "Total Quantity"),
],
}), []);

Here, `useExecuteQuery` executes the query based on the defined data source (`DM.DataSource`), dimensions (e.g., country, age range), and measures (e.g., revenue, quantity).

1. Fetching and Displaying Data

We leverage React's `useEffect` hook to update the state of `rowData` once data is fetched. This ensures AG Grid displays up-to-date information.

const { data, isLoading, isError } = useExecuteQuery(queryProps);

useEffect(() => {
if (!isLoading && !isError && data) {
const rows = data.rows.map((row) => ({
country: row[0]?.text || "N/A",
ageRange: row[1]?.text || "N/A",
year: row[2]?.text || "N/A",
revenue: row[3]?.data || 0,
quantity: row[4]?.data || 0,
}));
setRowData(rows);
}
}, [data, isLoading, isError]);

This block processes the raw data returned from the query and formats it for use in the AG Grid.

1. Column Definitions

AG Grid requires column definitions that define how each field should be displayed.

const columnDefs = useMemo(() => [
{ field: "country", headerName: "Country" },
{ field: "ageRange", headerName: "Age Range" },
{ field: "year", headerName: "Year" },
{
field: "revenue",
headerName: "Total Revenue",
valueFormatter: (params) => abbreviateNumber(params.value), // Helper function for number formatting
},
{
field: "quantity",
headerName: "Total Quantity",
valueFormatter: (params) => abbreviateNumber(params.value),
},
], []);

We define five columns: country, age range, year, revenue, and quantity. The `valueFormatter` function ensures that numbers are displayed in an abbreviated format (e.g., "1.2K" for thousands).

1. AG Grid Configuration

The grid configuration includes `defaultColDef` for common properties across all columns (like filtering and sorting), and `animateRows` for smoother transitions.

const defaultColDef = useMemo(() => ({
flex: 1,
minWidth: 100,
sortable: true,
filter: true,
resizable: true,
}), []);

Here, all columns are set to be sortable, filterable, and resizable by default.

1. Exporting Data

AG Grid’s API allows exporting table data to CSV. We use a button to trigger the export functionality:

const onBtnExport = useCallback(() => {
gridRef.current.api.exportDataAsCsv();
}, []);

1. Rendering the Grid

Finally, we render the AG Grid component, passing the `rowData`, `columnDefs`, and `defaultColDef` as props:

<AgGridReact
ref={gridRef}
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
animateRows={true}
/>

This sets up the AG Grid to dynamically render data retrieved via Sisense Compose SDK.

Value of Tabular Views

Tabular views are crucial for presenting structured data, providing an easy way to explore, filter, and analyze datasets. AG Grid’s built-in features like sorting, filtering, and exporting make it a perfect fit for visualizing data-rich tables in BI environments.

Features of AG Grid

- Sorting and Filtering: Users can sort and filter data by column.
- Grouping: Group rows by common fields.
- Customization: Full flexibility in column definitions and row configurations.
- Exporting: Allows exporting table data to CSV format.
- Performance: Handles large datasets efficiently.

Using Sisense Compose SDK to Power Components

Sisense Compose SDK is an API-first approach to data querying, which powers the `useExecuteQuery` hook in this component. By combining it with AG Grid, you can easily visualize dynamic, real-time data in table format.

Here is a functional example in Github 

https://github.com/sisensers/ag-grid-compose-sdk.git