release v2.6.0 and better detail panel docs

KevinVandy · Jan 11, 2024 · 3530073 · 3530073 · vercel · Jan 11, 2024
1 parent e5953b0
commit 3530073
Show file tree

Hide file tree

Showing 38 changed files with 5,739 additions and 48 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
@@ -3,11 +3,14 @@ import {
   MaterialReactTable,
   useMaterialReactTable,
 } from 'material-react-table';
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, useMediaQuery } from '@mui/material';
 import { data } from './makeData';
 
 const Example = () => {
+  const isMobile = useMediaQuery('(max-width: 720px)');
+
   const columns = useMemo(
+    //column definitions...
     () => [
       {
         accessorKey: 'id',
@@ -28,22 +31,29 @@ const Example = () => {
       },
     ],
     [],
+    //end
   );
 
   const table = useMaterialReactTable({
     columns,
     data,
-    displayColumnDefOptions: {
-      'mrt-row-expand': {
-        muiTableHeadCellProps: {
-          align: 'right',
-        },
-        muiTableBodyCellProps: {
-          align: 'right',
-        },
-      },
+    // displayColumnDefOptions: { //built-in now in v2.6.0 when positionExpandColumn is 'last'
+    //   'mrt-row-expand': {
+    //     muiTableHeadCellProps: {
+    //       align: 'right',
+    //     },
+    //     muiTableBodyCellProps: {
+    //       align: 'right',
+    //     },
+    //   },
+    // },
+    enableColumnPinning: isMobile, //alternative
+    initialState: {
+      expanded: true,
+    },
+    state: {
+      columnPinning: isMobile ? { right: ['mrt-row-expand'] } : {}, //alternative
     },
-    initialState: { expanded: true },
     renderDetailPanel: ({ row }) => (
       <Box
         sx={{
@@ -59,6 +69,7 @@ const Example = () => {
         <Typography>Country: {row.original.country}</Typography>
       </Box>
     ),
+    positionExpandColumn: 'last',
   });
 
   return <MaterialReactTable table={table} />;

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
@@ -4,11 +4,14 @@ import {
   useMaterialReactTable,
   type MRT_ColumnDef,
 } from 'material-react-table';
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, useMediaQuery } from '@mui/material';
 import { data, type Person } from './makeData';
 
 const Example = () => {
+  const isMobile = useMediaQuery('(max-width: 720px)');
+
   const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
     () => [
       {
         accessorKey: 'id',
@@ -29,22 +32,29 @@ const Example = () => {
       },
     ],
     [],
+    //end
   );
 
   const table = useMaterialReactTable({
     columns,
     data,
-    displayColumnDefOptions: {
-      'mrt-row-expand': {
-        muiTableHeadCellProps: {
-          align: 'right',
-        },
-        muiTableBodyCellProps: {
-          align: 'right',
-        },
-      },
+    // displayColumnDefOptions: { //built-in now in v2.6.0 when positionExpandColumn is 'last'
+    //   'mrt-row-expand': {
+    //     muiTableHeadCellProps: {
+    //       align: 'right',
+    //     },
+    //     muiTableBodyCellProps: {
+    //       align: 'right',
+    //     },
+    //   },
+    // },
+    enableColumnPinning: isMobile, //alternative
+    initialState: {
+      expanded: true,
+    },
+    state: {
+      columnPinning: isMobile ? { right: ['mrt-row-expand'] } : {}, //alternative
     },
-    initialState: { expanded: true },
     renderDetailPanel: ({ row }) => (
       <Box
         sx={{
@@ -60,6 +70,7 @@ const Example = () => {
         <Typography>Country: {row.original.country}</Typography>
       </Box>
     ),
+    positionExpandColumn: 'last',
   });
 
   return <MaterialReactTable table={table} />;

diff --git a/apps/material-react-table-docs/examples/enable-detail-panel-conditionally/index.tsx b/apps/material-react-table-docs/examples/enable-detail-panel-conditionally/index.tsx
@@ -0,0 +1,17 @@
+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 = () => {
+  return (
+    <SourceCodeSnippet
+      Component={Example}
+      javaScriptCode={JS}
+      typeScriptCode={TS}
+      tableId="enable-detail-panel-conditionally"
+    />
+  );
+};
+
+export default ExampleTable;
diff --git a/apps/material-react-table-docs/examples/enable-detail-panel-conditionally/sandbox/.gitignore b/apps/material-react-table-docs/examples/enable-detail-panel-conditionally/sandbox/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/...l-react-table-docs/examples/enable-detail-panel-conditionally/sandbox/README.md b/...l-react-table-docs/examples/enable-detail-panel-conditionally/sandbox/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/apps/material-react-table-docs/examples/enable-detail-panel-conditionally/sandbox/index.html b/apps/material-react-table-docs/examples/enable-detail-panel-conditionally/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>