revert stuff

KevinVandy · Jan 6, 2024 · e7193b2 · e7193b2
1 parent 7aa7ab6
commit e7193b2
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 193 deletions.
diff --git a/apps/material-react-table-docs/components/prop-tables/stateOptions.ts b/apps/material-react-table-docs/components/prop-tables/stateOptions.ts
@@ -11,15 +11,6 @@ export type StateOption = {
 };
 
 export const stateOptions: StateOption[] = [
-  {
-    defaultValue: '',
-    description: 'a variable will be used to render the leaf node.',
-    link: '',
-    linkText: '',
-    source: 'MRT',
-    stateOption: 'addColumnToLeafNode',
-    type: 'string',
-  },
   {
     defaultValue: '',
     description: 'a variable representing the currently creating row',

diff --git a/apps/material-react-table-docs/components/prop-tables/tableOptions.ts b/apps/material-react-table-docs/components/prop-tables/tableOptions.ts
@@ -357,17 +357,6 @@ export const tableOptions: TableOption[] = [
     source: 'MRT',
     type: 'boolean',
   },
-  {
-    tableOption: 'enableGroupingSingleColumn',
-    defaultValue: '',
-    description:
-      'Single group column is automatically added by the grid containing all row groups under a single row group hierarchy.',
-    link: '',
-    linkText: '',
-    required: false,
-    source: 'MRT',
-    type: 'boolean',
-  },
   {
     tableOption: 'enableFacetedValues',
     defaultValue: 'true',
@@ -2071,17 +2060,6 @@ export const tableOptions: TableOption[] = [
     source: 'TanStack Table',
     type: 'Record<string, SortingFn>',
   },
-  {
-    tableOption: 'showOpenedGroup',
-    defaultValue: '',
-    description:
-      'This option will show the name of the opened group inside the group column.',
-    link: '',
-    linkText: '',
-    required: false,
-    source: 'MRT',
-    type: 'boolean',
-  },
   {
     tableOption: 'state',
     defaultValue: '',

diff --git a/packages/material-react-table/src/hooks/useMRT_DisplayColumns.tsx b/packages/material-react-table/src/hooks/useMRT_DisplayColumns.tsx
@@ -56,7 +56,6 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>(
       tableOptions.enableEditing,
       tableOptions.enableExpandAll,
       tableOptions.enableExpanding,
-      tableOptions.enableGroupingSingleColumn,
       tableOptions.enableGrouping,
       tableOptions.enableRowActions,
       tableOptions.enableRowDragging,
@@ -69,10 +68,8 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>(
       tableOptions.renderDetailPanel,
       tableOptions.renderRowActionMenuItems,
       tableOptions.renderRowActions,
-      tableOptions.state?.addColumnToLeafNode,
       tableOptions.state?.columnOrder,
       tableOptions.state?.grouping,
-      tableOptions.showOpenedGroup,
     ],
   );
 };
@@ -160,45 +157,11 @@ function makeRowExpandColumn<TData extends MRT_RowData>(
     order.includes(id) &&
     showExpandColumn(tableOptions, tableOptions.state?.grouping ?? grouping)
   ) {
-    const arrGrouping = tableOptions.state?.grouping ?? grouping;
     return {
-      Cell: ({ row, table }) => {
-        const isGroupedSingleColumn =
-          tableOptions?.enableGroupingSingleColumn &&
-          tableOptions?.groupedColumnMode === 'remove';
-        return (
-          <>
-            <MRT_ExpandButton row={row} table={table} />
-            {isGroupedSingleColumn && row.groupingValue}
-            {isGroupedSingleColumn && row.getCanExpand() && (
-              <> ({row.subRows?.length})</>
-            )}
-            {isGroupedSingleColumn &&
-              tableOptions?.showOpenedGroup &&
-              !row.getCanExpand() &&
-              row.original?.[
-                table.getState().addColumnToLeafNode ??
-                  arrGrouping[arrGrouping.length - 1]
-              ]}
-          </>
-        );
-      },
-      Header: ({ table }) => {
-        return (
-          <>
-            {tableOptions.enableExpandAll && (
-              <MRT_ExpandAllButton table={table} />
-            )}
-            {tableOptions?.enableGroupingSingleColumn &&
-            tableOptions?.groupedColumnMode === 'remove'
-              ? table.getState().addColumnToLeafNode
-                ? table.getColumn?.(table.getState().addColumnToLeafNode ?? '')
-                    ?.columnDef?.header
-                : 'Group' /* Add key localization */
-              : undefined}
-          </>
-        );
-      },
+      Cell: ({ row, table }) => <MRT_ExpandButton row={row} table={table} />,
+      Header: tableOptions.enableExpandAll
+        ? ({ table }) => <MRT_ExpandAllButton table={table} />
+        : undefined,
       ...defaultDisplayColumnProps(tableOptions, id, 'expand'),
     };
   }
@@ -262,4 +225,4 @@ function makeSpacerColumn<TData extends MRT_RowData>(
     };
   }
   return null;
-}
+}
diff --git a/packages/material-react-table/src/types.ts b/packages/material-react-table/src/types.ts
@@ -338,7 +338,6 @@ export type MRT_DefinedTableOptions<TData extends MRT_RowData> =
   };
 
 export type MRT_TableState<TData extends MRT_RowData> = TableState & {
-  addColumnToLeafNode?: string;
   columnFilterFns: MRT_ColumnFilterFnsState;
   creatingRow: MRT_Row<TData> | null;
   density: MRT_DensityState;
@@ -809,7 +808,6 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   enableFullScreenToggle?: boolean;
   enableGlobalFilterModes?: boolean;
   enableGlobalFilterRankedResults?: boolean;
-  enableGroupingSingleColumn?: boolean;
   enablePagination?: boolean;
   enableRowActions?: boolean;
   enableRowDragging?: boolean;
@@ -1201,9 +1199,8 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
       }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>)
     | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>;
   selectAllMode?: 'all' | 'page';
-  showOpenedGroup?: boolean;
   /**
    * Manage state externally any way you want, then pass it back into MRT.
    */
   state?: Partial<MRT_TableState<TData>>;
-};
+};
diff --git a/packages/material-react-table/stories/features/ColumnGrouping.stories.tsx b/packages/material-react-table/stories/features/ColumnGrouping.stories.tsx
@@ -5,7 +5,6 @@ import Typography from '@mui/material/Typography';
 import {
   type MRT_Column,
   type MRT_ColumnDef,
-  type MRT_Row,
   MaterialReactTable,
 } from '../../src';
 import { faker } from '@faker-js/faker';
@@ -290,104 +289,47 @@ export const GroupingWithSingleColumn = () => {
   const _columns = useMemo<MRT_ColumnDef<Person>[]>(
     () => [
       {
-        accessorKey: 'firstName',
-        header: 'First Name',
-      },
-      {
-        accessorKey: 'lastName',
-        header: 'Last Name',
-      },
-      {
-        accessorKey: 'gender',
-        header: 'Gender',
-      },
-      {
-        accessorKey: 'city',
-        header: 'City',
-      },
-      {
-        accessorKey: 'state',
-        header: 'State',
-      },
-    ],
-    [],
-  );
+        AggregatedCell: ({ row, table }) => {
+          const {
+            options: {
+              icons: { ExpandMoreIcon },
+            },
+          } = table;
 
-  return (
-    <MaterialReactTable
-      columns={_columns}
-      data={data}
-      displayColumnDefOptions={{
-        'mrt-row-expand': {
-          visibleInShowHideMenu: false,
-        },
-      }}
-      enableColumnDragging
-      enableGrouping
-      enableGroupingSingleColumn
-      groupedColumnMode="remove"
-      initialState={{
-        density: 'compact',
-        grouping: ['gender', 'state'],
-      }}
-    />
-  );
-};
+          if (!row.groupingColumnId || !row.groupingValue) {
+            return null;
+          }
 
-export const GroupingWithSingleColumnWithShowOpenedGroup = () => {
-  const _columns = useMemo<MRT_ColumnDef<Person>[]>(
-    () => [
-      {
-        accessorKey: 'firstName',
-        header: 'First Name',
-      },
-      {
-        accessorKey: 'lastName',
-        header: 'Last Name',
-      },
-      {
-        accessorKey: 'gender',
-        header: 'Gender',
-      },
-      {
-        accessorKey: 'city',
-        header: 'City',
-      },
-      {
-        accessorKey: 'state',
-        header: 'State',
-      },
-    ],
-    [],
-  );
-
-  return (
-    <MaterialReactTable
-      columns={_columns}
-      data={data}
-      displayColumnDefOptions={{
-        'mrt-row-expand': {
-          visibleInShowHideMenu: false,
+          return (
+            <Stack alignItems="center" flexDirection="row">
+              <IconButton
+                onClick={() => row.toggleExpanded(!row.getIsExpanded())}
+                size="small"
+              >
+                <ExpandMoreIcon
+                  style={{
+                    transform: `rotate(${!row.getIsExpanded() ? -90 : 0}deg)`,
+                  }}
+                />
+              </IconButton>
+              <Typography>{row.groupingValue as ReactNode}</Typography>
+            </Stack>
+          );
         },
-      }}
-      enableColumnDragging
-      enableGrouping
-      enableGroupingSingleColumn
-      groupedColumnMode="remove"
-      initialState={{
-        addColumnToLeafNode: 'city',
-        columnVisibility: { city: false },
-        density: 'compact',
-        grouping: ['gender', 'state'],
-      }}
-      showOpenedGroup
-    />
-  );
-};
-
-export const GroupingWithSingleColumnWithRowVirtualization = () => {
-  const _columns = useMemo<MRT_ColumnDef<Person>[]>(
-    () => [
+        accessorKey: 'group',
+        columnDefType: 'display',
+        header: 'Group',
+        muiTableBodyCellProps: ({ row }) => {
+          return {
+            sx: {
+              justifyContent: 'left',
+              pl: `calc(${row.depth * 16}px)`,
+              textAlign: 'left',
+            },
+          };
+        },
+        visibleInShowHideMenu: false,
+      },
       {
         accessorKey: 'firstName',
         header: 'First Name',
@@ -418,35 +360,18 @@ export const GroupingWithSingleColumnWithRowVirtualization = () => {
       data={data}
       displayColumnDefOptions={{
         'mrt-row-expand': {
+          enableHiding: false,
           visibleInShowHideMenu: false,
         },
       }}
       enableColumnDragging
       enableGrouping
-      enableGroupingSingleColumn
-      enablePagination={false}
-      enableRowVirtualization
       groupedColumnMode="remove"
       initialState={{
-        addColumnToLeafNode: 'city',
-        columnVisibility: { city: false },
+        columnVisibility: { 'mrt-row-expand': false },
         density: 'compact',
         grouping: ['gender', 'state'],
       }}
-      muiTableBodyRowProps={({ row }) => {
-        return {
-          sx: {
-            bgcolor:
-              row.depth === 0
-                ? 'darkgreen'
-                : row.depth === 1
-                  ? 'slategrey'
-                  : 'inherit',
-          },
-        };
-      }}
-      muiTableContainerProps={{ sx: { maxHeight: 600 } }}
-      showOpenedGroup
     />
   );
-};
+};