material-react-table-narender 1.0.0

package/apps/material-react-table-docs/examples/enable-sticky-header/sandbox/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "material-react-table-example-enable-sticky-header",
+  "version": "0.0.0",
+ 
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3001",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.2.0",
+    "@mui/material": "^6.2.0",
+    "@mui/x-date-pickers": "^7.23.2",
+    "dayjs": "^1.11.13",
+    "material-react-table": "^3.0.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3"
+  }
+}

package/apps/material-react-table-docs/examples/enable-sticky-header/sandbox/src/TS.tsx

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+        footer: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+        footer: 'Last Name',
+      },
+      {
+        accessorKey: 'email',
+        header: 'Email',
+        footer: 'Email',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+        footer: 'City',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableBottomToolbar: false,
+    enableStickyHeader: true,
+    enableStickyFooter: true,
+    enablePagination: false,
+    muiTableContainerProps: { sx: { maxHeight: '400px' } },
+    muiTableBodyCellProps: {
+      sx: (theme) => ({
+        backgroundColor:
+          theme.palette.mode === 'dark'
+            ? theme.palette.grey[900]
+            : theme.palette.grey[50],
+      }),
+    },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/apps/material-react-table-docs/examples/enable-sticky-header/sandbox/src/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import ReactDOM from 'react-dom/client';
+import Example from './TS';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <StrictMode>
+    <Example />
+  </StrictMode>,
+);

package/apps/material-react-table-docs/examples/enable-sticky-header/sandbox/src/makeData.ts

@@ -0,0 +1,189 @@
+export type Person = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  city: string;
+};
+
+export const data: Person[] = [
+  {
+    firstName: 'Dylan',
+    lastName: 'Murray',
+    email: 'dmurray@yopmail.com',
+    city: 'East Daphne',
+  },
+  {
+    firstName: 'Raquel',
+    lastName: 'Kohler',
+    email: 'rkholer33@yopmail.com',
+    city: 'Columbus',
+  },
+  {
+    firstName: 'Ervin',
+    lastName: 'Reinger',
+    email: 'ereinger@mailinator.com',
+    city: 'South Linda',
+  },
+  {
+    firstName: 'Brittany',
+    lastName: 'McCullough',
+    email: 'bmccullough44@mailinator.com',
+    city: 'Lincoln',
+  },
+  {
+    firstName: 'Branson',
+    lastName: 'Frami',
+    email: 'bframi@yopmain.com',
+    city: 'New York',
+  },
+  {
+    firstName: 'Ben',
+    lastName: 'Murray',
+    email: 'benm@email.com',
+    city: 'Salt Lake City',
+  },
+  {
+    firstName: 'Elena',
+    lastName: 'Smith',
+    email: 'esmith@yopmail.com',
+    city: 'Los Angeles',
+  },
+  {
+    firstName: 'Michael',
+    lastName: 'Johnson',
+    email: 'mjohnson@mailinator.com',
+    city: 'Chicago',
+  },
+  {
+    firstName: 'Sophia',
+    lastName: 'Brown',
+    email: 'sbrown@yopmail.com',
+    city: 'Houston',
+  },
+  {
+    firstName: 'Lucas',
+    lastName: 'Davis',
+    email: 'ldavis@mailinator.com',
+    city: 'Phoenix',
+  },
+  {
+    firstName: 'Olivia',
+    lastName: 'Garcia',
+    email: 'ogarcia@yopmail.com',
+    city: 'Philadelphia',
+  },
+  {
+    firstName: 'Liam',
+    lastName: 'Rodriguez',
+    email: 'lrodriguez@mailinator.com',
+    city: 'San Antonio',
+  },
+  {
+    firstName: 'Emma',
+    lastName: 'Martinez',
+    email: 'emartinez@yopmail.com',
+    city: 'San Diego',
+  },
+  {
+    firstName: 'Noah',
+    lastName: 'Hernandez',
+    email: 'nhernandez@mailinator.com',
+    city: 'Dallas',
+  },
+  {
+    firstName: 'Ava',
+    lastName: 'Lopez',
+    email: 'alopez@yopmail.com',
+    city: 'San Jose',
+  },
+  {
+    firstName: 'William',
+    lastName: 'Gonzalez',
+    email: 'wgonzalez@mailinator.com',
+    city: 'Austin',
+  },
+  {
+    firstName: 'Isabella',
+    lastName: 'Wilson',
+    email: 'iwilson@yopmail.com',
+    city: 'Jacksonville',
+  },
+  {
+    firstName: 'James',
+    lastName: 'Anderson',
+    email: 'janderson@mailinator.com',
+    city: 'Fort Worth',
+  },
+  {
+    firstName: 'Mia',
+    lastName: 'Thomas',
+    email: 'mthomas@yopmail.com',
+    city: 'Columbus',
+  },
+  {
+    firstName: 'Alexander',
+    lastName: 'Taylor',
+    email: 'ataylor@mailinator.com',
+    city: 'Charlotte',
+  },
+  {
+    firstName: 'Grace',
+    lastName: 'Moore',
+    email: 'gmoore@yopmail.com',
+    city: 'Indianapolis',
+  },
+  {
+    firstName: 'Ethan',
+    lastName: 'White',
+    email: 'ewhite@mailinator.com',
+    city: 'San Francisco',
+  },
+  {
+    firstName: 'Lily',
+    lastName: 'Harris',
+    email: 'lharris@yopmail.com',
+    city: 'Seattle',
+  },
+  {
+    firstName: 'Daniel',
+    lastName: 'Martin',
+    email: 'dmartin@mailinator.com',
+    city: 'Denver',
+  },
+  {
+    firstName: 'Zoe',
+    lastName: 'Jackson',
+    email: 'zjackson@yopmail.com',
+    city: 'Boston',
+  },
+  {
+    firstName: 'Matthew',
+    lastName: 'Thompson',
+    email: 'mthompson@mailinator.com',
+    city: 'Nashville',
+  },
+  {
+    firstName: 'Ella',
+    lastName: 'Garcia',
+    email: 'egarcia@yopmail.com',
+    city: 'Detroit',
+  },
+  {
+    firstName: 'David',
+    lastName: 'Martinez',
+    email: 'dmartinez@mailinator.com',
+    city: 'Portland',
+  },
+  {
+    firstName: 'Aria',
+    lastName: 'Robinson',
+    email: 'arobinson@yopmail.com',
+    city: 'Las Vegas',
+  },
+  {
+    firstName: 'Joseph',
+    lastName: 'Clark',
+    email: 'jclark@mailinator.com',
+    city: 'Baltimore',
+  },
+];

package/apps/material-react-table-docs/examples/enable-sticky-header/sandbox/src/vite.env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/apps/material-react-table-docs/examples/enable-sticky-header/sandbox/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/apps/material-react-table-docs/examples/enable-sticky-header/sandbox/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node"
+  },
+  "include": ["vite.config.ts"]
+}

package/apps/material-react-table-docs/examples/enable-sticky-header/sandbox/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});

package/apps/material-react-table-docs/examples/expanding-tree-expanded/index.tsx

@@ -0,0 +1,15 @@
+import { SourceCodeSnippet } from '../../components/mdx/SourceCodeSnippet';
+import Example from './sandbox/src/TS';
+const TS = require('!!raw-loader!./sandbox/src/TS.tsx').default;
+
+const ExampleTable = () => {
+  return (
+    <SourceCodeSnippet
+      Component={Example}
+      typeScriptCode={TS}
+      tableId="expanding-tree-expanded"
+    />
+  );
+};
+
+export default ExampleTable;

package/apps/material-react-table-docs/examples/expanding-tree-expanded/sandbox/README.md

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

package/apps/material-react-table-docs/examples/expanding-tree-expanded/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>