npm - material-react-table-narender - Versions diffs - 1.0.0 → 2.13.4 - Mend

material-react-table-narender 1.0.0 → 2.13.4

Files changed (1998) hide show

package/apps/material-react-table-docs/pages/docs/getting-started/migrating-to-v3.mdx DELETED Viewed

@@ -1,112 +0,0 @@
-import Head from 'next/head';
-import { InstallCommand } from '../../../components/mdx/InstallCommand';
-<Head>
-  <title>
-    {'Migrating to Material React Table V3 - Material React Table V3 Docs'}
-  </title>
-  <meta
-    name="description"
-    content="Migrating to Material React Table V3 from V2"
-  />
-</Head>
-## Migrating to Material React Table V3 from V2
-This will be the easiest MRT upgrade ever! Material React Table V3 is mostly just a peer dependency bump to Material UI V6. The [Material UI V6 migration](https://mui.com/material-ui/migration/upgrade-to-v6/) is also relatively easy. This should take less than an hour to upgrade in most cases. Definitely a stark contrast from the Material UI V4 to V5 upgrade 💀.
-### New Feature Highlights
-1. Compatible with Material UI V6 with generally better performance across the board
-2. Keyboard navigation improvements that are now included by default
-3. **Almost no other changes**. MRT is not taking advantage of the new optional features in Material UI V6 yet. MRT V3 will serve as an easy upgrade target for those who are just looking to upgrade their Material UI package versions.
-### Upgrade Dependencies
-1. Upgrade Material UI to V6
-Before upgrading Material React Table, you need to upgrade Material UI to V6. You will spend most of your time here. Follow the [Material UI V6 migration guide](https://mui.com/material-ui/migration/upgrade-to-v6/) to upgrade your Material UI packages.
-You can get started by running the following command to set the mui-related dependencies to the latest versions in your `package.json`. This will not perform the full install yet.
-```bash
-npx npm-check-updates -u @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled
-```
-And then perform the actual install (downloading the new versions):
-<InstallCommand packagesString="@mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled" />
-2. Upgrade Material React Table to V3
-Run this command to set the `material-react-table` dependency to the latest version in your `package.json`. This will not perform the full install yet.
-```bash
-npx npm-check-updates -u material-react-table
-```
-And then perform the actual install (downloading the new version):
-<InstallCommand packagesString="" />
-You should now be on Material React Table V3! Look for any code or type errors in your project and fix them as needed.
-### Breaking Changes
-- `@mui/material` and `@mui/icons-material` v6.0.0 are now minimum required versions of Material UI packages (you might be able to get away with lower MUI versions for a while, but eventually MUI V6 APIs will be used internally by MRT and your project will break)
-- `@mui/x-date-pickers` v7.15.0 is now a minimum required dependency
-- `react` and `react-dom` v18.0.0 are now a minimum required dependencies (some React 18 APIs are now used internally by MRT)
-- Keyboard navigation for table cells in now enabled by default. If you had added your own custom keyboard shortcuts, you may want to set `enableKeyboardShortcuts` to `false` or remove your custom shortcuts.
-- Removed deprecated `MRT_Virtualizer` type in favor of separate `MRT_RowVirtualizer` and `MRT_ColumnVirtualizer` types
-- Removed deprecated `text` in favor of the more consistent `label` type in dropdown/autocomplete/select option types.
-- Deprecated several `mui*Props` table options that were column-specific. These table options should either be specified in column defs or in the `defaultColumn` table option.
-  - `muiColumnActionsButtonProps`
-  - `muiColumnDragHandleProps`
-  - `muiCopyButtonProps`
-  - `muiEditTextFieldProps`
-  - `muiFilterAutocompleteProps`
-  - `muiFilterCheckboxProps`
-  - `muiFilterDatePickerProps`
-  - `muiFilterDateTimePickerProps`
-  - `muiFilterSliderProps`
-  - `muiFilterTextFieldProps`
-  - `muiFilterTimePickerProps`
-  - `muiTableBodyCellProps`
-  - `muiTableHeadCellProps`
-  - `muiTableFooterCellProps`
-  - `renderCellActionMenuItems`
-  - `renderColumnActionsMenuItems`
-  - `renderColumnFilterModeMenuItems`
-```diff
-const table = useTable({
-  columns,
-  data,
-  // Recommended to specify these table options in the defaultColumn instead
-+ defaultColumn: { // applies to all columns
-+    muiTableBodyCellProps: {
-+      align: 'center',
-+    },
-+    muiFilterAutocompleteProps: {
-+      sx: { my: 2 },
-+    },
-+  },
-// these table options will be removed in MRT V4
--  muiTableBodyCellProps: {
--    align: 'center',
--  },
--  muiFilterAutocompleteProps: {
--    sx: { my: 2 },
--  },
-)};
-```
-You can be lazy with these changes. These table options are just marked as deprecated, but they will still work until MRT V4.
-> Can I uninstall Emotion Yet? No, Emotion is still required for Material React Table V3, but it won't be for long. MRT V4 will remove the Emotion dependency in favor of [Pigment CSS](https://mui.com/blog/introducing-pigment-css/).
-<br />
-Is anything missing from this v3 migration guide? Make a PR or join the [Discord](https://discord.gg/5wqyRx6fnm) to discuss.
-Looking for the v1 to v2 migration guide? [Click here](https://v2.material-react-table.com/docs/getting-started/migrating-to-v2)

package/apps/material-react-table-docs/pages/docs/getting-started/usage.mdx DELETED Viewed

@@ -1,173 +0,0 @@
-import Head from 'next/head';
-import SimpleCodeSandbox from '../../../examples/SimpleCodeSandbox';
-<Head>
-  <title>{'Usage - Material React Table V3 Docs'}</title>
-  <meta
-    name="description"
-    content="A brief overview of how to use material-react-table and create columns and data"
-  />
-</Head>
-## Usage
-Here is a brief overview of how to use Material React Table. This is a very simple example and will not cover all features of the library, but should be a great starting point.
-### Setup
-To start using MaterialReactTable, you first need to [install](/docs/getting-started/install) `material-react-table` and the necessary Material UI V6 dependencies.
-There are additional steps and customizations you can do for Material UI, if you have not set it up in your application already. Check out the [Material UI docs](https://mui.com/material-ui/getting-started/installation/) for more information.
-If you need to change the colors of the table components, advanced [Material UI Theming](https://mui.com/material-ui/customization/default-theme/) is covered in the [Customize Components](/docs/guides/customize-components#material-ui-theme) guide.
-### Import MaterialReactTable and useMaterialReactTable
-Once you have everything installed, you can import from `material-react-table` like this:
-```tsx
-import {
-  MaterialReactTable,
-  useMaterialReactTable,
-} from 'material-react-table';
-```
-`MaterialReactTable` is the main component that you will use to render your table.
-`useMaterialReactTable` is the React hook that you will use to define all the columns, data, and other options for your table.
-### Creating Data/Rows
-Your data must be an array of objects that have properties matching the accessors in your column definitions. The objects themselves can theoretically be in any shape, but it will be easier to set up your columns if your data is already in a flat object format like the example below, but it is not required.
-> **Common Gotcha**: When defining `data` that will be passed to a `useMaterialReactTable` hook, make sure that the `data` is _memoized_ or _stable_ (i.e. `useState`, `useMemo`, defined outside of your table component, etc.). Otherwise you may get infinite renders.
-#### Simple Data Example
-```jsx
-//recommended flat structure for data, but not required (nested data is fine, but takes more setup in column definitions)
-//must be memoized or stable (useState, useMemo, defined outside of the component, etc.)
-const data = [
-  {
-    name: 'John', // key "name" matches `accessorKey` in ColumnDef down below
-    age: 30, // key "age" matches `accessorKey` in ColumnDef down below
-  },
-  {
-    name: 'Sara',
-    age: 25,
-  },
-];
-```
-Your data does NOT have to be created statically like this, of course. More than likely, your data is being fetched from a backend API. Check out the [Remote Data examples](/docs/examples/react-query) to see how you can fetch data and pass it to your tables.
-### Creating Columns
-There are several different ways to define columns, depending on your needs. Let's create some basic `"data"` columns. That is, columns that connect to our data. Most of the time, we can simply use the `accessorKey` property to access the data if the data is in a simple format. Alternatively, if some data in a column needs some logic or processing, you can use the `accessorFn` property to define a function that returns the data for each cell.
-#### Simple Column Definition Example
-```jsx
-//simple column definitions pointing to flat data
-const columns = useMemo(
-  () => [
-    {
-      header: 'Name',
-      accessorKey: 'name', //simple recommended way to define a column
-      //more column options can be added here to enable/disable features, customize look and feel, etc.
-      //optional custom cell render
-      Cell: ({ row }) => (
-        <Box sx={{ display: 'flex', gap: '2ch', alignItems: 'center' }}>
-          <img src={row.original.imageUrl} />
-          <a href={row.profileUrl}>{row.name}</a>
-        </Box>
-      ),
-    },
-    {
-      header: 'Age',
-      accessorFn: (dataRow) => parseInt(dataRow.age), //alternate way to access data if processing logic is needed
-    },
-  ],
-  [],
-);
-```
-> Note: Do NOT have your accessors resolve JSX or markup. That's what custom `Cell` renders are for. Accessors should only return primitive data so that the table can sort, filter, search, and group properly.
-### Full Simple Example
-Put it all together, and you have a basic table! You can also play around and enable some features, either per column in the column definitions, or as table options passed to `useMaterialReactTable`.
-```tsx
-import { useMemo } from 'react';
-import {
-  MaterialReactTable,
-  useMaterialReactTable,
-  type MRT_ColumnDef, //if using TypeScript (optional, but recommended)
-} from 'material-react-table';
-//If using TypeScript, define the shape of your data (optional, but recommended)
-interface Person {
-  name: string;
-  age: number;
-}
-//mock data - strongly typed if you are using TypeScript (optional, but recommended)
-const data: Person[] = [
-  {
-    name: 'John',
-    age: 30,
-  },
-  {
-    name: 'Sara',
-    age: 25,
-  },
-];
-export default function App() {
-  //column definitions - strongly typed if you are using TypeScript (optional, but recommended)
-  const columns = useMemo<MRT_ColumnDef<Person>[]>(
-    () => [
-      {
-        accessorKey: 'name', //simple recommended way to define a column
-        header: 'Name',
-        muiTableHeadCellProps: { style: { color: 'green' } }, //custom props
-        enableHiding: false, //disable a feature for this column
-      },
-      {
-        accessorFn: (originalRow) => parseInt(originalRow.age), //alternate way
-        id: 'age', //id required if you use accessorFn instead of accessorKey
-        header: 'Age',
-        Header: <i style={{ color: 'red' }}>Age</i>, //optional custom markup
-        Cell: ({ cell }) => <i>{cell.getValue<number>().toLocaleString()}</i>, //optional custom cell render
-      },
-    ],
-    [],
-  );
-  //pass table options to useMaterialReactTable
-  const table = useMaterialReactTable({
-    columns,
-    data, //must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
-    enableRowSelection: true, //enable some features
-    enableColumnOrdering: true, //enable a feature for all columns
-    enableGlobalFilter: false, //turn off a feature
-  });
-  //note: you can also pass table options as props directly to <MaterialReactTable /> instead of using useMaterialReactTable
-  //but the useMaterialReactTable hook will be the most recommended way to define table options
-  return <MaterialReactTable table={table} />;
-}
-```
-> **Note:** Again, it is very important that the columns and data definitions are _memoized_ or _stable_. Otherwise, the entire table will be re-rendered during every react re-render in your application, which can lead to performance issues. To make a variable stable, store it in `useState`, wrap it in `useMemo`, define it outside of a component, or in your state management tool of choice so it does not get recreated on every render and cause an infinite re-render loop.
-### Live Code Sandbox Example
-<SimpleCodeSandbox />
-### Next Steps
-There are numerous ways you can customize the behavior and look and feel of your Material React Table. View some of the [examples](/docs/examples) to see how you can customize your table, and visit the [props page](/docs/api/table-options) to see all the props that you can use to turn features on and off and customize the look and feel of your table.
-Also, be sure to check out all the [Fundamental Guides](/docs/guides#fundamentals) and any of the [Advanced Feature Guides](/docs/guides#feature-guides) you may be interested in to learn more about the different features you can toggle on and off, or customize.

package/apps/material-react-table-docs/pages/docs/guides/accessibility.mdx DELETED Viewed

@@ -1,133 +0,0 @@
-import Head from 'next/head';
-import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
-import ColumnOptionsTable from '../../../components/prop-tables/ColumnOptionsTable';
-import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';
-<Head>
-  <title>
-    {'Accessibility / Keyboard Navigation Guide - Material React Table V3 Docs'}
-  </title>
-  <meta
-    name="description"
-    content="How to use and customize the accessibility and keyboard navigation features of Material React Table"
-  />
-</Head>
-## Accessibility / Keyboard Navigation Guide
-Material React Table tries to get the basics of data grid accessibility right out of the box. But since you can easily add event handlers to just about any interaction inside of the table, you can heavily customize the accessibility of your table to your needs too.
-### Relevant Table Options
-<TableOptionsTable onlyOptions={new Set(['enableKeyboardShortcuts'])} />
-### Keyboard Navigation
-> New in v3
-Material React Table V3 introduces a new table option that is `true` by default: `enableKeyboardShortcuts`
-#### `enableKeyboardShortcuts`
-This option enables the following keyboard shortcuts:
-- `Tab` - Moves the focus to the next cell or element in the table (standard browser behavior)
-- `Arrow Up` - Moves the focus 1 cell up
-- `Arrow Down` - Moves the focus 1 cell down
-- `Arrow Left` - Moves the focus 1 cell left
-- `Arrow Right` - Moves the focus 1 cell right
-- `Home` - Moves the focus to the first cell in the current row
-- `End` - Moves the focus to the last cell in the current row
-- `Page Up` - Moves the focus to the first cell in the current column
-- `Page Down` - Moves the focus to the last cell in the current column
-- `Ctrl/Cmd + Home` - Moves the focus to the first cell in the table (top left in left-to-right languages)
-- `Ctrl/Cmd + End` - Moves the focus to the last cell in the table (bottom right in left-to-right languages)
-- `Enter` - Performs certain actions in the currently focused cell such as sorting, row selection, row expansion, row pinning, etc.
-- `Space` - Also performs certain actions in the currently focused cell such as sorting, row selection, row expansion, row pinning, etc.
-- `Ctrl/Cmd + Enter` - Opens column actions menu on a header
-- `Escape` - Exits full screen mode
-A `tabIndex={0}` is also automatically added to all cells, headers, and footers when `enableKeyboardShortcuts` is enabled to allow for keyboard focus.
-### Custom Keyboard Shortcuts
-You do not have to use the provided keyboard shortcuts. You can turn off `enableKeyboardShortcuts` and add your own keyboard shortcuts using the `onKeyDown` event handler on all of the table cells (or any other element).
-You can also add custom focus styles to any element using the `sx` prop.
-```tsx
-const table = useMaterialReactTable({
-  columns,
-  data,
-  //add custom keyboard shortcuts
-  defaultColumn: {
-    //header
-    muiTableHeadCellProps: {
-      onKeyDown: (event) => {
-        if (event.key === 't' && event.metaKey) {
-          alert('You pressed the custom shortcut!');
-        }
-      },
-      tabIndex: 0, //allow for keyboard focus
-    },
-    //body
-    muiTableBodyCellProps: {
-      onKeyDown: (event) => {
-        if (event.key === 't' && event.metaKey) {
-          alert('You pressed the custom shortcut!');
-        }
-      },
-      //add custom focus styles
-      sx: {
-        '&:focus-visible': {
-          //or just `&:focus` if you want all focus events to be visible
-          outline: '2px solid red',
-          outlineOffset: '-2px',
-        },
-      },
-      tabIndex: 0, //allow for keyboard focus
-    },
-  },
-  enableKeyboardShortcuts: false, //turn off default keyboard shortcuts from MRT
-});
-```
-### Custom Focus Styles
-An outline is automatically added to all elements when they are focused. You can easily customize the color of the outline by setting `cellNavigationOutlineColor` property in the `mrtTheme` table option.
-```tsx
-const table = useMaterialReactTable({
-  columns,
-  data,
-  mrtTheme: {
-    cellNavigationOutlineColor 'limegreen'
-  }
-});
-```
-Or, of course, you can just use the `sx` props to override any styles you want, just like any other style override in MRT.
-```tsx
-const table = useMaterialReactTable({
-  columns,
-  data,
-  defaultColumn: {
-    muiTableBodyCellProps: {
-      sx: {
-        '&:focus-visible': {
-          outline: '4px solid red',
-          outlineOffset: '-4px',
-        },
-      },
-    },
-  },
-});
-```
-### Full Screen Mode
-Now in V3, a focus trap is applied to the table when in full screen mode. This is to prevent the user from navigating outside of the table when using the arrow keys.
-The user can exit full screen mode by pressing `Escape`.

package/apps/material-react-table-docs/pages/docs/guides/aggregation.mdx DELETED Viewed

@@ -1,231 +0,0 @@
-import Head from 'next/head';
-import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
-import ColumnOptionsTable from '../../../components/prop-tables/ColumnOptionsTable';
-import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';
-import AggregationExample from '../../../examples/aggregation-and-grouping';
-import AggregationMultiExample from '../../../examples/aggregation-multi';
-<Head>
-  <title>{'Aggregation Guide - Material React Table V3 Docs'}</title>
-  <meta
-    name="description"
-    content="How to use and customize the aggregation and grouping features of Material React Table"
-  />
-</Head>
-## Aggregation Feature Guide
-Material React Table has built-in aggregation features. There are options for both automatic client-side grouping and aggregation, as well as manual server-side grouping and aggregation. This guide will walk you through the different options and how to use and customize them.
-> See the [Column Grouping Guide](/docs/guides/column-grouping) as a prerequisite to this guide. The Aggregation and Grouping Guide was recently split into two separate guides.
-### Relevant Table Options
-<TableOptionsTable
-  onlyOptions={
-    new Set([
-      'aggregationFns',
-      'enableExpandAll',
-      'enableGrouping',
-      'enableStickyFooter',
-      'getGroupedRowModel',
-      'groupedColumnMode',
-      'manualGrouping',
-      'muiToolbarAlertBannerChipProps',
-      'onGroupingChange',
-      'positionToolbarAlertBanner',
-    ])
-  }
-/>
-### Relevant Column Options
-<ColumnOptionsTable
-  onlyOptions={
-    new Set([
-      'AggregatedCell',
-      'Footer',
-      'GroupedCell',
-      'PlaceholderCell',
-      'enableGrouping',
-    ])
-  }
-/>
-### Relevant State
-<StateOptionsTable onlyOptions={new Set(['grouping', 'expanded'])} />
-### Aggregation on Grouped Rows
-One of the cool features of Material React Table is that it can automatically aggregate the data in grouped rows. To enable this, you must specify both an `aggregationFn` and an `AggregatedCell` render option on a column definition.
-#### Built-in Aggregation Functions
-There are several built-in aggregation functions available that you can use. They are:
-- `count` - Finds the number of rows in a group
-- `extent` - Finds the minimum and maximum values of a group of rows
-- `max` - Finds the maximum value of a group of rows
-- `mean` - Finds the average value of a group of rows
-- `median` - Finds the median value of a group of rows
-- `min` - Finds the minimum value of a group of rows
-- `sum` - sums the values of a group of rows
-- `uniqueCount` - Finds the number of unique values of a group of rows
-- `unique` - Finds the unique values of a group of rows
-_All of these built-in aggregation functions are from [TanStack Table](https://tanstack.com/table/v8/docs/api/features/grouping#aggregation-functions)_
-```jsx
-const columns = [
-  {
-    accessorKey: 'team', //grouped by team in initial state below
-    header: 'Team',
-  },
-  {
-    accessorKey: 'player',
-    header: 'Player',
-  },
-  {
-    accessorKey: 'points',
-    header: 'Points',
-    aggregationFn: 'sum', //calc total points for each team by adding up all the points for each player on the team
-    AggregatedCell: ({ cell }) => <div>Team Score: {cell.getValue()}</div>,
-  },
-];
-const table = useMaterialReactTable({
-  columns,
-  data,
-  enableGrouping: true,
-  initialState: { grouping: ['team'], expanded: true },
-});
-return <MaterialReactTable table={table} />;
-```
-#### Custom Aggregation Functions
-If none of these pre-built aggregation functions work for you, you can also pass in a custom aggregation function. The aggregation function will be passed in an array of values from the column that you are aggregating. It should return a single value that will be displayed in the aggregated cell.
-If you are specifying a custom aggregation function, it must implement the following type:
-```jsx
-export type AggregationFn<TData extends AnyData> = (
-  getLeafRows: () => Row<TData>[],
-  getChildRows: () => Row<TData>[]
-) => any
-```
-### Aggregation on All Rows in Footer
-Material React Table does not automatically aggregate all rows for you to calculate totals for the entire table. However, it is still easy enough to do this manually and add in your custom calculations into the `footer` or `Footer` of a column definition. It is recommended that you do any necessary aggregation calculations on your data in a useMemo hook before passing it to the columns footer in your columns definition.
-```jsx
-//calculate the total points for all players in the table in a useMemo hook
-const averageScore = useMemo(() => {
-  const totalPoints = data.reduce((acc, row) => acc + row.points, 0);
-  const totalPlayers = data.length;
-  return totalPoints / totalPlayers;
-}, [data]);
-const columns = useMemo(
-  () => [
-    {
-      accessorKey: 'name',
-      header: 'Name',
-    },
-    {
-      accessorKey: 'score',
-      header: 'Score',
-      Footer: () => <div>Average Score: {averageScore}</div>, //do not do calculations in render, do them in useMemo hook and pass them in here
-    },
-  ],
-  [averageScore],
-);
-```
-> Please remember to perform heavy aggregation calculations in a useMemo hook to avoid unnecessary re-renders!
-### Custom Cell Renders for Aggregation and Grouping
-There are a few custom cell render overrides that you should be aware of when using grouping and aggregation features.
-#### AggregatedCell Column Option
-"Aggregation Cells" are cells in an aggregated row (not a normal data row) that can display aggregates (avg, sum, etc.) of the data in a group. The cell that the table is grouped on, however, is not an Aggregate Cell, but rather a [GroupedCell](#groupedcell-column-option).
-You can specify the custom render for these cells with the `AggregatedCell` render option on a column definition.
-```jsx
-const columns = [
-  {
-    accessorKey: 'points',
-    header: 'Points',
-    aggregationFn: 'sum',
-    AggregatedCell: ({ cell }) => <div>Total Score: {cell.getValue()}</div>,
-  },
-];
-```
-#### GroupedCell Column Option
-"Grouped Cells" are cells in a grouped row (not a normal data row) that by default display the value that the rows are grouped on and the number of rows in the group. You can override the default render for these cells with the `GroupedCell` render option on a column definition.
-```jsx
-const columns = [
-  {
-    accessorKey: 'team',
-    header: 'Team',
-    GroupedCell: ({ cell }) => <div>Team: {cell.getValue()}</div>,
-  },
-];
-```
-#### PlaceholderCell Column Option
-"Placeholder Cells" are cells that are usually meant to be empty in grouped rows and columns. They are simply rendered with a value of `null` by default, but you can override the default render for these cells with the `PlaceholderCell` render option on a column definition.
-```jsx
-const columns = [
-  {
-    accessorKey: 'team',
-    header: 'Team',
-    PlaceholderCell: ({ cell, row }) => (
-      <div>{row.original.someOtherRowValue}</div>
-    ),
-  },
-];
-```
-### Aggregation/Grouping Example
-<AggregationExample />
-### Multiple Aggregations Per column
-You may want to calculate more than one aggregation per column. This is now easier if you are upgraded to at least v1.3.0. You can now specify an array of `aggregationFn`s, and then reference the aggregation results from an array in the `AggregatedCell` render option.
-```jsx
-const columns = [
-  {
-    header: 'Salary',
-    accessorKey: 'salary',
-    aggregationFn: ['count', 'mean'], //multiple aggregation functions
-    AggregatedCell: ({ cell, table }) => (
-      <div>
-        {/*get the count from the first aggregation*/}
-        <div>Count: {cell.getValue()[0]}</div>
-        {/*get the average from the second aggregation*/}
-        <div>Average Salary: {cell.getValue()[1]}</div>
-      </div>
-    ),
-  },
-];
-```
-<AggregationMultiExample />
-### 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.