update expanding docs

KevinVandy · Oct 27, 2023 · f6b1ed6 · f6b1ed6
1 parent c5150a8
commit f6b1ed6
Show file tree

Hide file tree

Showing 18 changed files with 340 additions and 287 deletions.
diff --git a/apps/material-react-table-docs/examples/alternate-detail-panel/sandbox/src/JS.js b/apps/material-react-table-docs/examples/alternate-detail-panel/sandbox/src/JS.js
@@ -1,5 +1,8 @@
 import { useMemo } from 'react';
-import { MaterialReactTable } from 'material-react-table';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+} from 'material-react-table';
 import { Box, Typography } from '@mui/material';
 import { data } from './makeData';
 
@@ -27,39 +30,38 @@ const Example = () => {
     [],
   );
 
-  return (
-    <MaterialReactTable
-      columns={columns}
-      data={data}
-      displayColumnDefOptions={{
-        'mrt-row-expand': {
-          muiTableHeadCellProps: {
-            align: 'right',
-          },
-          muiTableBodyCellProps: {
-            align: 'right',
-          },
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    displayColumnDefOptions: {
+      'mrt-row-expand': {
+        muiTableHeadCellProps: {
+          align: 'right',
         },
-      }}
-      initialState={{ expanded: true }}
-      renderDetailPanel={({ row }) => (
-        <Box
-          sx={{
-            display: 'grid',
-            margin: 'auto',
-            gridTemplateColumns: '1fr 1fr',
-            width: '100%',
-          }}
-        >
-          <Typography>Address: {row.original.address}</Typography>
-          <Typography>City: {row.original.city}</Typography>
-          <Typography>State: {row.original.state}</Typography>
-          <Typography>Country: {row.original.country}</Typography>
-        </Box>
-      )}
-      positionExpandColumn="last"
-    />
-  );
+        muiTableBodyCellProps: {
+          align: 'right',
+        },
+      },
+    },
+    initialState: { expanded: true },
+    renderDetailPanel: ({ row }) => (
+      <Box
+        sx={{
+          display: 'grid',
+          margin: 'auto',
+          gridTemplateColumns: '1fr 1fr',
+          width: '100%',
+        }}
+      >
+        <Typography>Address: {row.original.address}</Typography>
+        <Typography>City: {row.original.city}</Typography>
+        <Typography>State: {row.original.state}</Typography>
+        <Typography>Country: {row.original.country}</Typography>
+      </Box>
+    ),
+  });
+
+  return <MaterialReactTable table={table} />;
 };
 
 export default Example;
diff --git a/apps/material-react-table-docs/examples/alternate-detail-panel/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/alternate-detail-panel/sandbox/src/TS.tsx
@@ -1,5 +1,9 @@
 import { useMemo } from 'react';
-import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
 import { Box, Typography } from '@mui/material';
 import { data, type Person } from './makeData';
 
@@ -27,39 +31,38 @@ const Example = () => {
     [],
   );
 
-  return (
-    <MaterialReactTable
-      columns={columns}
-      data={data}
-      displayColumnDefOptions={{
-        'mrt-row-expand': {
-          muiTableHeadCellProps: {
-            align: 'right',
-          },
-          muiTableBodyCellProps: {
-            align: 'right',
-          },
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    displayColumnDefOptions: {
+      'mrt-row-expand': {
+        muiTableHeadCellProps: {
+          align: 'right',
         },
-      }}
-      initialState={{ expanded: true }}
-      renderDetailPanel={({ row }) => (
-        <Box
-          sx={{
-            display: 'grid',
-            margin: 'auto',
-            gridTemplateColumns: '1fr 1fr',
-            width: '100%',
-          }}
-        >
-          <Typography>Address: {row.original.address}</Typography>
-          <Typography>City: {row.original.city}</Typography>
-          <Typography>State: {row.original.state}</Typography>
-          <Typography>Country: {row.original.country}</Typography>
-        </Box>
-      )}
-      positionExpandColumn="last"
-    />
-  );
+        muiTableBodyCellProps: {
+          align: 'right',
+        },
+      },
+    },
+    initialState: { expanded: true },
+    renderDetailPanel: ({ row }) => (
+      <Box
+        sx={{
+          display: 'grid',
+          margin: 'auto',
+          gridTemplateColumns: '1fr 1fr',
+          width: '100%',
+        }}
+      >
+        <Typography>Address: {row.original.address}</Typography>
+        <Typography>City: {row.original.city}</Typography>
+        <Typography>State: {row.original.state}</Typography>
+        <Typography>Country: {row.original.country}</Typography>
+      </Box>
+    ),
+  });
+
+  return <MaterialReactTable table={table} />;
 };
 
 export default Example;
diff --git a/apps/material-react-table-docs/examples/disable-column-hiding/sandbox/src/JS.js b/apps/material-react-table-docs/examples/disable-column-hiding/sandbox/src/JS.js
@@ -1,5 +1,8 @@
 import { useMemo } from 'react';
-import { MaterialReactTable } from 'material-react-table';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+} from 'material-react-table';
 
 const Example = () => {
   const columns = useMemo(
@@ -72,13 +75,14 @@ const Example = () => {
     ],
     [],
   );
-  return (
-    <MaterialReactTable
-      columns={columns}
-      data={data}
-      initialState={{ columnVisibility: { address: false } }}
-    />
-  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    initialState: { columnVisibility: { address: false } },
+  });
+
+  return <MaterialReactTable table={table} />;
 };
 
 export default Example;
diff --git a/apps/material-react-table-docs/examples/disable-column-hiding/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/disable-column-hiding/sandbox/src/TS.tsx
@@ -1,5 +1,9 @@
 import { useMemo } from 'react';
-import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
 
 const Example = () => {
   const columns = useMemo(
@@ -73,13 +77,14 @@ const Example = () => {
     ],
     [],
   );
-  return (
-    <MaterialReactTable
-      columns={columns}
-      data={data}
-      initialState={{ columnVisibility: { address: false } }}
-    />
-  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    initialState: { columnVisibility: { address: false } },
+  });
+
+  return <MaterialReactTable table={table} />;
 };
 
 export default Example;
diff --git a/apps/material-react-table-docs/examples/disable-density-toggle/sandbox/src/JS.js b/apps/material-react-table-docs/examples/disable-density-toggle/sandbox/src/JS.js
@@ -1,5 +1,8 @@
 import { useMemo } from 'react';
-import { MaterialReactTable } from 'material-react-table';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+} from 'material-react-table';
 import { data } from './makeData';
 
 const Example = () => {
@@ -31,14 +34,14 @@ const Example = () => {
     [],
   );
 
-  return (
-    <MaterialReactTable
-      columns={columns}
-      data={data}
-      enableDensityToggle={false}
-      initialState={{ density: 'compact' }}
-    />
-  );
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableDensityToggle: false,
+    initialState: { density: 'compact' },
+  });
+
+  return <MaterialReactTable table={table} />;
 };
 
 export default Example;
diff --git a/apps/material-react-table-docs/examples/disable-density-toggle/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/disable-density-toggle/sandbox/src/TS.tsx
@@ -1,5 +1,9 @@
 import { useMemo } from 'react';
-import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
 import { data, type Person } from './makeData';
 
 const Example = () => {
@@ -32,14 +36,14 @@ const Example = () => {
     //end
   );
 
-  return (
-    <MaterialReactTable
-      columns={columns}
-      data={data}
-      enableDensityToggle={false}
-      initialState={{ density: 'compact' }}
-    />
-  );
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableDensityToggle: false,
+    initialState: { density: 'compact' },
+  });
+
+  return <MaterialReactTable table={table} />;
 };
 
 export default Example;
diff --git a/apps/material-react-table-docs/examples/enable-column-resizing/sandbox/src/JS.js b/apps/material-react-table-docs/examples/enable-column-resizing/sandbox/src/JS.js
@@ -1,5 +1,8 @@
 import { useMemo } from 'react';
-import { MaterialReactTable } from 'material-react-table';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+} from 'material-react-table';
 import { data } from './makeData';
 
 const Example = () => {
@@ -33,20 +36,20 @@ const Example = () => {
     [],
   );
 
-  return (
-    <MaterialReactTable
-      columns={columns}
-      data={data}
-      //optionally override the default column widths
-      defaultColumn={{
-        maxSize: 400,
-        minSize: 80,
-        size: 150, //default size is usually 180
-      }}
-      enableColumnResizing
-      columnResizeMode="onChange" //default
-    />
-  );
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    //optionally override the default column widths
+    defaultColumn: {
+      maxSize: 400,
+      minSize: 80,
+      size: 160, //default size is usually 180
+    },
+    enableColumnResizing: true,
+    columnResizeMode: 'onChange', //default
+  });
+
+  return <MaterialReactTable table={table} />;
 };
 
 export default Example;
diff --git a/apps/material-react-table-docs/examples/enable-column-resizing/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/enable-column-resizing/sandbox/src/TS.tsx
@@ -1,5 +1,9 @@
 import { useMemo } from 'react';
-import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
 import { data, type Person } from './makeData';
 
 const Example = () => {
@@ -33,20 +37,20 @@ const Example = () => {
     [],
   );
 
-  return (
-    <MaterialReactTable
-      columns={columns}
-      data={data}
-      //optionally override the default column widths
-      defaultColumn={{
-        maxSize: 400,
-        minSize: 80,
-        size: 160, //default size is usually 180
-      }}
-      enableColumnResizing
-      columnResizeMode="onChange" //default
-    />
-  );
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    //optionally override the default column widths
+    defaultColumn: {
+      maxSize: 400,
+      minSize: 80,
+      size: 160, //default size is usually 180
+    },
+    enableColumnResizing: true,
+    columnResizeMode: 'onChange', //default
+  });
+
+  return <MaterialReactTable table={table} />;
 };
 
 export default Example;