release v2.5.0 - new alt grouping UIs

apps/material-react-table-docs/components/mdx/SourceCodeSnippet.tsx

@@ -473,7 +473,8 @@ export const SourceCodeSnippet = ({
                         {line.map((token, key) => {
                           if (
                             token.content === '//column definitions...' ||
-                            token.content === '//data definitions...'
+                            token.content === '//data definitions...' ||
+                            token.content === '//demo...'
                           ) {
                             skipCodeLine = true;
                             if (isFullCode) {

apps/material-react-table-docs/components/navigation/Sidebar.tsx

@@ -31,7 +31,7 @@ export const SideBar = ({ navOpen, setNavOpen }: Props) => {
           pb: '10rem',
           scrollPaddingTop: '20%',
           transition: 'all .2s',
-          width: navOpen ? '290px' : 0,
+          width: navOpen ? '300px' : 0,
           '@media (max-width: 900px)': {
             mt: '50px',
           },

apps/material-react-table-docs/components/navigation/routes.ts

@@ -173,12 +173,16 @@ export const routes: Array<RouteItem> = [
         ],
       },
       {
-        href: '/docs/examples/aggregation-and-grouping',
+        href: '/docs/examples/expanding-tree',
         label: 'Expanding / Grouping Examples',
         secondaryItems: [
           {
-            href: '/docs/examples/aggregation-and-grouping',
-            label: 'Aggregation and Grouping Example',
+            href: '/docs/examples/expanding-tree',
+            label: 'Expanding Sub-Rows (Tree) Example',
+          },
+          {
+            href: '/docs/examples/expanding-tree-flat-parse',
+            label: 'Expanding Parsed Tree Example',
           },
           {
             href: '/docs/examples/detail-panel',
@@ -189,12 +193,16 @@ export const routes: Array<RouteItem> = [
             label: 'Chart Detail Panel Example',
           },
           {
-            href: '/docs/examples/expanding-tree',
-            label: 'Expanding Sub-Rows (Tree) Example',
+            href: '/docs/examples/column-grouping',
+            label: 'Column Grouping Example',
           },
           {
-            href: '/docs/examples/expanding-tree-flat-parse',
-            label: 'Expanding Parsed Tree Example',
+            href: '/docs/examples/customized-grouping',
+            label: 'Customized Grouping Example',
+          },
+          {
+            href: '/docs/examples/aggregation-and-grouping',
+            label: 'Aggregation Example',
           },
         ],
       },
@@ -352,8 +360,8 @@ export const routes: Array<RouteItem> = [
         href: '/docs/guides#feature-guides',
         items: [
           {
-            href: '/docs/guides/aggregation-and-grouping',
-            label: 'Aggregation and Grouping',
+            href: '/docs/guides/aggregation',
+            label: 'Aggregation',
           },
           {
             href: '/docs/guides/async-loading',
@@ -371,6 +379,10 @@ export const routes: Array<RouteItem> = [
             href: '/docs/guides/column-filtering',
             label: 'Column Filtering',
           },
+          {
+            href: '/docs/guides/column-grouping',
+            label: 'Column Grouping',
+          },
           {
             href: '/docs/guides/column-hiding',
             label: 'Column Hiding',

apps/material-react-table-docs/example-groups/ExpandingExamples.tsx

@@ -1,5 +1,7 @@
 import { useRouter } from 'next/router';
 import { Box, Tab, Tabs } from '@mui/material';
+import EnableColumnGroupingExample from '../examples/enable-column-grouping';
+import CustomizeRemoveColumnGroupingExample from '../examples/customize-remove-column-grouping';
 import AggregationAndGroupingExample from '../examples/aggregation-and-grouping';
 import DetailExample from '../examples/enable-detail-panel';
 import ChartDetailPanelExample from '../examples/chart-detail-panel';
@@ -28,17 +30,16 @@ const ExpandingExamples = ({ isPage = false }) => {
               : setActiveTab(newPath as string)
           }
         >
-          <Tab
-            label="Aggregation and Grouping"
-            value="aggregation-and-grouping"
-          />
-          <Tab label="Detail Panel" value="detail-panel" />
-          <Tab label="Chart Detail Panel" value="chart-detail-panel" />
           <Tab label="Expanding Tree" value="expanding-tree" />
           <Tab
-            label="Expanding Parsed Tree"
+            label="Parsed Tree"
             value="expanding-tree-flat-parse"
           />
+          <Tab label="Detail Panel" value="detail-panel" />
+          <Tab label="Chart Detail Panel" value="chart-detail-panel" />
+          <Tab label="Column Grouping" value="column-grouping" />
+          <Tab label="Customized Grouping" value="customized-grouping" />
+          <Tab label="Aggregation" value="aggregation-and-grouping" />
           <Link href="/docs/examples" passHref legacyBehavior>
             <Tab
               label={
@@ -53,15 +54,19 @@ const ExpandingExamples = ({ isPage = false }) => {
         </Tabs>
       </Box>
       <Box>
-        {activeTab === 'aggregation-and-grouping' && (
-          <AggregationAndGroupingExample />
-        )}
-        {activeTab === 'detail-panel' && <DetailExample />}
-        {activeTab === 'chart-detail-panel' && <ChartDetailPanelExample />}
         {activeTab === 'expanding-tree' && <ExpandingTreeExample />}
         {activeTab === 'expanding-tree-flat-parse' && (
           <ExpandingParsedTreeExample />
         )}
+        {activeTab === 'detail-panel' && <DetailExample />}
+        {activeTab === 'chart-detail-panel' && <ChartDetailPanelExample />}
+        {activeTab === 'column-grouping' && <EnableColumnGroupingExample />}
+        {activeTab === 'customized-grouping' && (
+          <CustomizeRemoveColumnGroupingExample />
+        )}
+        {activeTab === 'aggregation-and-grouping' && (
+          <AggregationAndGroupingExample />
+        )}
       </Box>
     </>
   );

apps/material-react-table-docs/examples/aggregation-and-grouping/sandbox/src/JS.js

@@ -116,10 +116,16 @@ const Example = () => {
   const table = useMaterialReactTable({
     columns,
     data,
+    displayColumnDefOptions: {
+      'mrt-row-expand': {
+        enableResizing: true,
+      },
+    },
     enableColumnResizing: true,
     enableGrouping: true,
     enableStickyHeader: true,
     enableStickyFooter: true,
+    groupedColumnMode: 'remove', //instead of the default 'reorder'
     initialState: {
       density: 'compact',
       expanded: true, //expand all groups by default

apps/material-react-table-docs/examples/aggregation-and-grouping/sandbox/src/TS.tsx

@@ -117,10 +117,16 @@ const Example = () => {
   const table = useMaterialReactTable({
     columns,
     data,
+    displayColumnDefOptions: {
+      'mrt-row-expand': {
+        enableResizing: true,
+      },
+    },
     enableColumnResizing: true,
     enableGrouping: true,
     enableStickyHeader: true,
     enableStickyFooter: true,
+    groupedColumnMode: 'remove', //instead of the default 'reorder'
     initialState: {
       density: 'compact',
       expanded: true, //expand all groups by default

apps/material-react-table-docs/examples/customize-remove-column-grouping/index.tsx

@@ -0,0 +1,18 @@
+import { SourceCodeSnippet } from '../../components/mdx/SourceCodeSnippet';
+import Example from './sandbox/src/TS';
+const JS = require('!!raw-loader!./sandbox/src/JS.js').default;
+const TS = require('!!raw-loader!./sandbox/src/TS.tsx').default;
+
+const ExampleTable = ({ showTopRow = true }) => {
+  return (
+    <SourceCodeSnippet
+      Component={Example}
+      javaScriptCode={JS}
+      typeScriptCode={TS}
+      tableId="customize-remove-column-grouping"
+      showTopRow={showTopRow}
+    />
+  );
+};
+
+export default ExampleTable;

apps/material-react-table-docs/examples/customize-remove-column-grouping/sandbox/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

apps/material-react-table-docs/examples/customize-remove-column-grouping/sandbox/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`

apps/material-react-table-docs/examples/customize-remove-column-grouping/sandbox/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Material React Table Example</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>