@mini_7/material-react-table-mcp 4.0.0

package/data/guides/column-filtering.md

@@ -0,0 +1,366 @@
+## Column Filtering Feature Guide
+
+Filtering is one of the most powerful features of Material React Table and is enabled by default. There is a lot of flexibility and customization available here. Whether you want to customize the powerful client-side filtering already built in or implement your own [server-side filtering](#manual-server-side-column-filtering), Material React Table has got you covered.
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `columnFilterModeOptions` - type `Array<MRT_FilterOption | string> | null` - Specify which filter modes are available for every column. Optionally specify this per column as a column option.
+- `enableColumnFilterModes` - type `boolean` - default `false`
+- `enableColumnFilters` - type `boolean` - default `true`
+- `enableFacetedValues` - type `boolean` - default `true` - Enable or disable the calculation of faceted values. Facet values are a list of all unique values in a column. These are useful for advanced filtering components with selection, autocomplete, etc.
+- `enableFilterMatchHighlighting` - type `boolean` - default `true` - Enable or disable highlighting text that matches the filter in the table cells.
+- `enableFilters` - type `boolean` - default `true` - Enable or disable both the global and column filters.
+- `filterFns` - type `Record<string, FilterFn>` - This option allows you to define custom filter functions that can be referenced in a column's filterFn option by their key
+- `filterFromLeafRows` - type `boolean` - default `false`
+- `manualFiltering` - type `boolean` - Disables the getFilteredRowModel from being used to filter data. This may be useful if your table needs to dynamically support both client-side and server-side filtering.
+- `maxLeafRowFilterDepth` - type `number` - default `100` - Set a maximum number leaf row depth that will be filtered. Preserve child rows of filtered rows by setting this to "0"
+- `muiFilterAutocompleteProps` - type `AutocompleteProps | ({ column, rangeFilterIndex, table }) => AutocompleteProps`
+- `muiFilterCheckboxProps` - type `CheckboxProps | ({ column, table}) => CheckboxProps`
+- `muiFilterDatePickerProps` - type `DatePickerProps | ({ column, rangeFilterIndex, table }) => DatePickerProps`
+- `muiFilterDateTimePickerProps` - type `DateTimePickerProps | ({ column, rangeFilterIndex, table }) => DateTimePickerProps`
+- `muiFilterSliderProps` - type `SliderProps | ({ column, table}) => SliderProps`
+- `muiFilterTextFieldProps` - type `TextFieldProps | ({ table, column, rangeFilterIndex}) => TextFieldProps`
+- `muiFilterTimePickerProps` - type `TimePickerProps | ({ column, rangeFilterIndex, table }) => TimePickerProps`
+- `onColumnFilterFnsChange` - type `OnChangeFn<{ [key: string]: MRT_FilterOption }>`
+- `onColumnFiltersChange` - type `OnChangeFn<ColumnFiltersState>` - If provided, this function will be called with an updaterFn when state.columnFilters changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+- `onShowColumnFiltersChange` - type `OnChangeFn<boolean>`
+- `renderColumnFilterModeMenuItems` - type `({ column, internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]`
+
+### Relevant Column Options
+
+Relevant column options (get_mrt_api has full details):
+
+- `columnFilterModeOptions` - type `Array<string>`
+- `enableColumnFilter` - type `boolean` - Enable or disable column filtering for this column. Filter will not be shown if disabled.
+- `enableColumnFilterModes` - type `boolean` - Enable column filtering modes for this column.
+- `enableFilterMatchHighlighting` - type `boolean` - Enable or disable filter match highlighting for this column.
+- `Filter` - type `({ column, header, table }) => ReactNode` - Define a custom filter component in a column.
+- `filterFn` - type `MRT_FilterFn` - default `'fuzzy'`
+- `filterSelectOptions` - type `Array<string | { label: string; value: string }>`
+- `filterVariant` - type `'text' | 'select' | 'multi-select' | 'range' | 'range-slider' | 'checkbox' | 'autocomplete' | 'date' | 'date-range' | 'datetime' | 'datetime-range' | 'time' | 'time-range'` - default `'text'` - Specify whether the filter should be a text input or a select input, or other type of pre-built input.
+- `muiFilterAutocompleteProps` - type `AutocompleteProps | ({ column, rangeFilterIndex, table }) => AutocompleteProps`
+- `muiFilterCheckboxProps` - type `CheckboxProps | ({ column, table }) => CheckboxProps`
+- `muiFilterDatePickerProps` - type `DatePickerProps | ({ column, rangeFilterIndex, table }) => DatePickerProps`
+- `muiFilterDateTimePickerProps` - type `DateTimePickerProps | ({ column, rangeFilterIndex, table }) => DateTimePickerProps`
+- `muiFilterSliderProps` - type `SliderProps | ({ column, table}) => SliderProps`
+- `muiFilterTextFieldProps` - type `TextFieldProps | ({ column, rangeFilterIndex, table }) => TextFieldProps`
+- `muiFilterTimePickerProps` - type `TimePickerProps | ({ column, rangeFilterIndex, table }) => TimePickerProps`
+- `renderColumnFilterModeMenuItems`
+
+### Relevant State Options
+
+Relevant state options (get_mrt_api has full details):
+
+- `columnFilterFns` - type `{ [key: string]: MRT_FilterFn }`
+- `columnFilters` - type `Array<{id: string, value: unknown}>` - default `{}` - an array of objects with id and value properties, representing the current filter values for each column
+- `showColumnFilters` - type `boolean` - default `false`
+
+### Disable Filtering Features
+
+Various subsets of filtering features can be disabled. If you want to disable filtering completely, you can set the `enableColumnFilters` table option to `false` to remove all filters from each column. Alternatively, `enableColumnFilter` can be set to `false` for individual columns.
+
+`enableFilters` can be set to `false` to disable both column filters and the global search filter.
+
+### Filter Variants
+
+Material React Table has several built-in filter variants for advanced filtering. These can be specified on a per-column basis using the `filterVariant` option. The following variants are available:
+
+- `'text'` - shows the default text field
+- `'autocomplete'` - shows an autocomplete text field with the options from faceted values or specified in `filterSelectOptions` array.
+- `'select'` - shows a select dropdown with the options from faceted values or specified in `filterSelectOptions` array.
+- `'multi-select'` - shows a select dropdown with the options from faceted values or specified in `filterSelectOptions` and allows multiple selections with checkboxes
+- `'range'` - shows min and max text fields for filtering a range of values
+- `'range-slider'` - shows a slider for filtering a range of values
+- `'date'` - shows a date picker for filtering by date values
+- `'datetime'` - shows a date and time picker for filtering by date and time values
+- `'date-range'` - shows a date range picker for filtering by date ranges
+- `'datetime-range'` - shows a date and time range picker for filtering by date and time ranges
+- `'time'` - shows a time picker for filtering by time values
+- `'time-range'` - shows a time range picker for filtering by time ranges
+- `'checkbox'` - shows a checkbox for filtering by `'true'` or `'false'` values
+
+> `'autocomplete'`, `'date'`, and `'date-range'`, variants are new in v2.0.0
+>
+> `datetime`, `datetime-range`, `time`, and `time-range` variants are new in v2.4.0
+
+> Live example: `customize-filter-variants` (call get_mrt_example with that id).
+
+#### Faceted Values for Filter Variants
+
+Faceted values are a list of unique values for a column that gets generated under the hood from table data when the `enableFacetedValues` table option is set to `true`. These values can be used to populate the select dropdowns for the `'select'` and `'multi-select'` filter variants, or the min and max values for the `'range-slider'` variant. This means that you no longer need to manually specify the `filterSelectOptions` table option for these variants manually, especially if you are using client-side filtering.
+
+> Live example: `enable-filter-facet-values` (call get_mrt_example with that id).
+
+#### Custom Faceted Values
+
+If you are using server-side pagination and filtering, you can still customize the faceted values output with the `getFacetedUniqueValues` and `getFacetedMinMaxValues` props.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableFacetedValues: true,
+  //if using server-side pagination and filtering
+  getFacetedMinMaxValues: (table) => {
+    //fetch min and max values from server
+    return [minValue, maxValue];
+  },
+  //if using server-side filtering
+  getFacetedUniqueValues: (table) => {
+    const uniqueValueMap = new Map<string, number>();
+    //fetch unique values from server, ideally including the count of each unique value
+    return uniqueValueMap;
+  },
+})
+```
+
+### Column Filter Display Modes
+
+By default, column filters inputs show below the column header. You can switch to a more "excel-like" UI by setting the `columnFilterDisplayMode` table option to `'popover'`. This will show a filter icon in the column header that can be clicked to open a popover with the filter input.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  columnFilterDisplayMode: 'popover', //filter inputs will show in a popover (like excel)
+});
+```
+
+Alternatively, if you want to render your own column filter UI in a separate sidebar, but still want to use the built-in filtering functionality, you can set the `columnFilterDisplayMode` table option to `'custom'`.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  columnFilterDisplayMode: 'custom', //render your own column filter UI (e.g. in a sidebar)
+});
+```
+
+> Live example: `alternate-column-filtering` (call get_mrt_example with that id).
+
+### Custom Filter Functions
+
+You can specify either a pre-built filterFn that comes with Material React Table or pass in your own custom filter functions.
+
+#### Custom Filter Functions Per Column
+
+By default, Material React Table uses a `fuzzy` filtering algorithm based on the popular `match-sorter` [library from Kent C. Dodds](https://www.npmjs.com/package/match-sorter). However, Material React Table also comes with numerous other filter functions that you can specify per column in the `filterFn` column options.
+
+##### Pre-built MRT Filter Functions
+
+> Pre-built filter functions from Material React Table include `between`, `betweenInclusive`, `contains`, `empty`, `endsWith`, `equals`, `fuzzy`, `greaterThan`, `greaterThanOrEqualTo`, `lessThan`, `lessThanOrEqualTo`, `notEmpty`, `notEquals`, and `startsWith`. View these algorithms [here](https://github.com/gyminii/material-react-table/blob/v4/packages/material-react-table/src/fns/filterFns.ts)
+
+##### Pre-built TanStack Table Filter Functions
+
+> Pre-built filter functions from TanStack Table include `includesString`, `includesStringSensitive`, `equalsString`, `equalsStringSensitive`, `arrIncludes`, `arrIncludesAll`, `arrIncludesSome`, `weakEquals`, and `inNumberRange`. View more information about these algorithms in the [TanStack Table Filter docs](https://tanstack.com/table/v9/docs/framework/react/guide/column-filtering).
+
+You can specify either a pre-built filter function, from Material React Table or TanStack Table, or you can even specify _your own custom filter function_ in the `filterFn` column option.
+
+```jsx
+const columns = [
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+    // using a prebuilt filter function from Material React Table
+    filterFn: 'startsWith',
+  },
+  {
+    accessorKey: 'middleName',
+    header: 'Middle Name',
+    // using a prebuilt filter function from TanStack Table
+    filterFn: 'includesStringSensitive',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Last Name',
+    // custom filter function
+    filterFn: (row, id, filterValue) =>
+      row.getValue(id).startsWith(filterValue),
+  },
+];
+```
+
+If you provide a custom filter function, it must have the following signature:
+
+```ts
+(row: Row<TData>, id: string, filterValue: string | number) => boolean;
+```
+
+This function will be used to filter 1 row at a time and should return a `boolean` indicating whether or not that row passes the filter.
+
+#### Add Custom Filter Functions
+
+You can add custom filter functions to the `filterFns` table option. These will be available to all columns to use. The `filterFn` table option on a column will override any filter function with the same name in the `filterFns` table option.
+
+```jsx
+const columns = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    filterFn: 'customFilterFn',
+  },
+];
+
+const table = useMaterialReactTable({
+  columns,
+  data,
+  filterFns: {
+    customFilterFn: (row, id, filterValue) => {
+      return row.customField === value;
+    },
+  },
+});
+```
+
+### Filter Modes
+
+#### Enable Column Filter Modes (Filter Switching)
+
+If you want to let the user switch between multiple different filter modes from a drop-down menu on the Filter Textfield, you can enable that with the `enableColumnFilterModes` table option or column option. This will enable the filter icon in the filter text field to open a drop-down menu with the available filter modes when clicked.
+
+```tsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableColumnFilterModes: true,
+});
+```
+
+#### Customize Filter Modes
+
+You can narrow down the available filter mode options by setting the `columnFilterModeOptions` table option or a column specific `columnFilterModeOptions` option.
+
+```tsx
+const columns = [
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+    columnFilterModeOptions: ['fuzzy', 'contains', 'startsWith'],
+  },
+  {
+    accessorKey: 'age',
+    header: 'Age',
+    columnFilterModeOptions: ['between', 'lessThan', 'greaterThan'],
+  },
+];
+```
+
+#### Render Custom Filter Mode Menu
+
+You can also render custom menu items in the filter mode drop-down menu by setting the `renderColumnFilterModeMenuItems` table option or column option. This option is a function that takes in the column and returns an array of `MenuItem` components. This is useful if you want to add custom filter modes that are not included in Material React Table, or if you just want to render the menu in your own custom way
+
+```jsx
+const columns = [
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+    renderColumnFilterModeMenuItems: ({ column, onSelectFilterMode }) => [
+      <MenuItem
+        key="startsWith"
+        onClick={() => onSelectFilterMode('startsWith')}
+      >
+        Start With
+      </MenuItem>,
+      <MenuItem
+        key="endsWith"
+        onClick={() => onSelectFilterMode('yourCustomFilterFn')}
+      >
+        Your Custom Filter Fn
+      </MenuItem>,
+    ],
+  },
+];
+
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableColumnFilterModes: true,
+  // renderColumnFilterModeMenuItems could go here if you want to apply to all columns
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+> Live example: `customize-filter-modes` (call get_mrt_example with that id).
+
+### Expanded Leaf Row Filtering Options
+
+If you are using the filtering features along-side either the [grouping](/docs/guides/aggregation-and-grouping) or [expanding](/docs/guides/expanding-sub-rows) features, then there are a few behaviors and customizations you should be aware of.
+
+Check out the [Expanded Leaf Row Filtering Behavior docs](/docs/guides/expanding-sub-rows#expanded-leaf-row-filtering-behavior) to learn more about the `filterFromLeafRows` and `maxLeafRowFilterDepth` props.
+
+### Manual Server-Side Column Filtering
+
+A very common use case when you have a lot of data is to filter the data on the server, instead of client-side. In this case, you will want to set the `manualFiltering` table option to `true` and manage the `columnFilters` state yourself like so (can work in conjunction with [manual global filtering](/docs/guides/global-filtering#manual-server-side-global-filtering)).
+
+```jsx
+// You can manage and have control over the columnFilters state yourself
+const [columnFilters, setColumnFilters] = useState([]);
+const [data, setData] = useState([]); //data will get updated after re-fetching
+
+useEffect(() => {
+  const fetchData = async () => {
+    // send api requests when columnFilters state changes
+    const filteredData = await fetch();
+    setData([...filteredData]);
+  };
+}, [columnFilters]);
+
+const table = useMaterialReactTable({
+  columns,
+  data, // this will already be filtered on the server
+  manualFiltering: true, //turn off client-side filtering
+  onColumnFiltersChange: setColumnFilters, //hoist internal columnFilters state to your state
+  state: { columnFilters }, //pass in your own managed columnFilters state
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+> Specifying `manualFiltering` turns off all client-side filtering and assumes that the `data` you pass to `<MaterialReactTable />` is already filtered.
+
+See either the [React Query](/docs/examples/react-query) or [useEffect fetching](/docs/examples/remote) examples to see fully server-side **filtering**, pagination, and sorting in action.
+
+### Customize Material UI Filter components
+
+You can customize the Material UI filter components by setting the `muiFilterTextFieldProps` table option or column option.
+
+You can also turn a filter textfield into a select dropdown by setting the `filterSelectOptions` table option or column option.
+
+> Live example: `customize-filter-components` (call get_mrt_example with that id).
+
+### Custom Filter Components
+
+If you need custom filter components that are much more complex than text-boxes and dropdowns, you can create and pass in your own filter components using the `Filter` column option.
+
+### Filter Match Highlighting
+
+Filter Match Highlighting is a new featured enabled by default that will highlight text in the table body cells that matches the current filter query with a shade of the `theme.palette.warning.main` color.
+
+Filter Match Highlighting will only work on columns with the default `text` filter variant. Also, if you are using a custom `Cell` render override for a column, you will need to use the `renderedCellValue` table option instead of `cell.getValue()` in order to preserve the filter match highlighting.
+
+```jsx
+const columns = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    Cell: ({ renderedCellValue }) => <span>{renderedCellValue}</span>, // use renderedCellValue instead of cell.getValue()
+  },
+];
+```
+
+#### Disable Filter Match Highlighting
+
+This feature can be disabled by setting the `enableFilterMatchHighlighting` table option to `false`.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableFilterMatchHighlighting: false,
+});
+```
+
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-filtering-examples)**

package/data/guides/column-grouping.md

@@ -0,0 +1,192 @@
+## Column Grouping Feature Guide
+
+Material React Table has built-in column grouping features. There are options for both automatic client-side grouping as well as manual server-side grouping. This guide will walk you through the different options and how to use and customize them.
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `enableExpandAll` - type `boolean` - default `true`
+- `enableGrouping` - type `boolean`
+- `groupedColumnMode` - type `false | 'reorder' | 'remove'` - default `reorder` - Grouping columns are automatically reordered by default to the start of the columns list. If you would rather remove them or leave them as-is, set the appropriate mode here.
+- `manualGrouping` - type `boolean` - Enables manual grouping. If this option is set to true, the table will not automatically group rows using getGroupedRowModel() and instead will expect you to manually group the rows before passing them to the table. This is useful if you are doing server-side grouping and aggregation.
+- `muiToolbarAlertBannerChipProps` - type `ChipProps| ({ table }} => ChipProps`
+- `onGroupingChange` - type `OnChangeFn<GroupingState>` - If this function is provided, it will be called when the grouping state changes and you will be expected to manage the state yourself. You can pass the managed state back to the table via the tableOptions.state.grouping option.
+- `positionToolbarAlertBanner` - type `'bottom' | 'top' | 'none'` - default `'top'`
+- `renderToolbarAlertBannerContent` - type `({ table, groupedAlert, selectedAlert }) => ReactNode`
+
+### Relevant Column Options
+
+Relevant column options (get_mrt_api has full details):
+
+- `AggregatedCell` - type `({ cell, column, row, table }) => ReactNode` - Define a custom cell render for an aggregated cell.
+- `enableGrouping` - type `boolean`
+- `GroupedCell` - type `({ cell, column, row, table }) => ReactNode` - Define a custom cell render for a grouped cell.
+- `PlaceholderCell` - type `({ cell, column, row, table }) => ReactNode` - Define a custom cell render for a placeholder cell.
+
+### Relevant State
+
+Relevant state options (get_mrt_api has full details):
+
+- `expanded` - type `Record<string, boolean> | boolean` - default `{}`
+- `grouping` - type `Array<string>` - default `[]`
+
+### Enable Grouping
+
+To enable grouping, set the `enableGrouping` table option to `true`. This will both add a drag handle button so that columns can be dragged to the dropzone to be grouped and will add an entry column actions menu to group or ungroup a column.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableGrouping: true,
+});
+```
+
+### Grouped Column Mode
+
+> New in v2.5.0, The `"remove"` columnGroupMode now has an official UI implementation
+
+The `groupedColumnMode` table option controls how grouped columns are displayed once a column has been grouped. There are three options:
+
+1. `"reorder"` (default) - Grouped columns will be displayed as the first columns in the table, followed by the 'mrt-row-expand' display column, followed by the remaining columns in their original order.
+2. `"remove"` - Grouped columns will be removed from the table and only their aggregate values will be displayed alongside the expand button in the 'mrt-row-expand' display column, followed by the remaining columns in their original order.
+3. `false` - Grouping columns will have no effect on the column order. The 'mrt-row-expand' display column will be displayed as the first column in the table, followed by the remaining columns in their original order.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableGrouping: true,
+  groupedColumnMode: 'remove', //instead of default "reorder"
+});
+```
+
+> Live example: `enable-column-grouping` (call get_mrt_example with that id).
+
+#### Disable Grouping Per Column
+
+```jsx
+const columns = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    enableGrouping: false, // disable grouping for this column
+  },
+  {
+    accessorKey: 'age',
+    header: 'Age',
+  },
+];
+
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableGrouping: true,
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+#### Hide Drag Buttons for Grouping
+
+If you do not want the drag buttons that come with the grouping feature, you can independently disable them without disabling the grouping feature entirely by setting the `enableColumnDragging` table option to `false`.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableGrouping: true,
+  enableColumnDragging: false, //do not show drag handle buttons, but still show grouping options in column actions menu
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+### Group Columns by Default
+
+If you want columns to be grouped by default, you can set the `grouping` state in either the `initialState` or `state` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableGrouping: true,
+  initialState: { grouping: ['location', 'department'] }, //group by location and department by default
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+### Expand Grouped Rows by Default
+
+In addition to grouping columns by default, you may also want those grouped rows to be expanded and visible by default, too. You can do this by setting the `expanded` state to `true` in either the `initialState` or `state` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableGrouping: true,
+  initialState: {
+    grouping: ['location', 'department'], //group by location and department by default and expand grouped rows
+    expanded: true, //show grouped rows by default
+  },
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+### Customize Expand Column
+
+You can customize the expand column by using the `displayColumnDefOptions` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableGrouping: true,
+  displayColumnDefOptions: {
+    'mrt-row-expand': {
+      size: 120, //make the expand column wider
+    },
+  },
+});
+```
+
+Going further, you can completely overhaul how the expand column renders using custom `Cell` and `Header` renders here for advanced use cases.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableGrouping: true,
+  displayColumnDefOptions: {
+    'mrt-row-expand': {
+      Cell: ({ row, table }) => {
+        return (
+          <>
+            <MRT_ExpandButton row={row} table={table} />
+            {/*custom content*/}
+          </>
+        );
+      },
+      Header: ({ table }) => {
+        return (
+          <>
+            <MRT_ExpandAllButton table={table} />
+            {/*custom content*/}
+          </>
+        );
+      },
+    },
+  },
+});
+```
+
+> Live example: `customize-remove-column-grouping` (call get_mrt_example with that id).
+
+### Manual Grouping
+
+Manual Grouping means that the `data` that you pass to the table is already grouped and aggregated, and you do not want Material React Table to do any of the grouping or aggregation for you. This is useful if you are using a backend API to do the grouping and aggregation for you, and you just want to display the results. However, you will need to put your data in the specific format that the `expanding` features understand.
+
+> Learn more about [Expanding Sub Rows](/docs/guides/expanding-sub-rows) and [Aggregation](/docs/guides/aggregation) Features in their own dedicated guides.