KevinVandy · KevinVandy · Mar 29, 2023 · Mar 28, 2023 · Mar 28, 2023
diff --git a/apps/material-react-table-docs/examples/row-actions-buttons/index.tsx b/apps/material-react-table-docs/examples/row-actions-buttons/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+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="row-actions-buttons"
+    />
+  );
+};
+
+export default ExampleTable;
diff --git a/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/.gitignore b/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/README.md b/apps/material-react-table-docs/examples/row-actions-buttons/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/row-actions-buttons/sandbox/index.html b/apps/material-react-table-docs/examples/row-actions-buttons/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>
diff --git a/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/package.json b/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "material-react-table-example-minimal",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite --port 3001",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.11.0",
+    "@mui/material": "^5.11.4",
+    "material-react-table": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.0.1",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4"
+  }
+}
diff --git a/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/src/JS.js b/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/src/JS.js
@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+import MaterialReactTable from 'material-react-table';
+import { data } from './makeData';
+import { Box, IconButton } from '@mui/material';
+import { Edit as EditIcon, Delete as DeleteIcon } from '@mui/icons-material';
+
+export const Example = () => {
+  const columns = useMemo(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+    ],
+    [],
+    //end
+  );
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableRowActions
+      renderRowActions={({ row }) => (
+        <Box>
+          <IconButton onClick={() => console.info('Edit')}>
+            <EditIcon />
+          </IconButton>
+          <IconButton onClick={() => console.info('Delete')}>
+            <DeleteIcon />
+          </IconButton>
+        </Box>
+      )}
+    />
+  );
+};
+
+export default Example;
diff --git a/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/src/TS.tsx
@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+import MaterialReactTable, { type MRT_ColumnDef } from 'material-react-table';
+import { data, type Person } from './makeData';
+import { Box, IconButton } from '@mui/material';
+import { Edit as EditIcon, Delete as DeleteIcon } from '@mui/icons-material';
+
+export const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+    ],
+    [],
+    //end
+  );
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableRowActions
+      renderRowActions={({ row }) => (
+        <Box>
+          <IconButton onClick={() => console.info('Edit')}>
+            <EditIcon />
+          </IconButton>
+          <IconButton onClick={() => console.info('Delete')}>
+            <DeleteIcon />
+          </IconButton>
+        </Box>
+      )}
+    />
+  );
+};
+
+export default Example;
diff --git a/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/src/main.tsx b/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Example from './TS';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <Example />
+  </React.StrictMode>,
+);
diff --git a/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/src/makeData.ts b/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/src/makeData.ts
@@ -0,0 +1,45 @@
+export type Person = {
+  firstName: string;
+  lastName: string;
+  address: string;
+  city: string;
+  state: string;
+};
+
+export const data = [
+  {
+    firstName: 'Dylan',
+    lastName: 'Murray',
+    address: '261 Erdman Ford',
+    city: 'East Daphne',
+    state: 'Kentucky',
+  },
+  {
+    firstName: 'Raquel',
+    lastName: 'Kohler',
+    address: '769 Dominic Grove',
+    city: 'Columbus',
+    state: 'Ohio',
+  },
+  {
+    firstName: 'Ervin',
+    lastName: 'Reinger',
+    address: '566 Brakus Inlet',
+    city: 'South Linda',
+    state: 'West Virginia',
+  },
+  {
+    firstName: 'Brittany',
+    lastName: 'McCullough',
+    address: '722 Emie Stream',
+    city: 'Lincoln',
+    state: 'Nebraska',
+  },
+  {
+    firstName: 'Branson',
+    lastName: 'Frami',
+    address: '32188 Larkin Turnpike',
+    city: 'Charleston',
+    state: 'South Carolina',
+  },
+];
diff --git a/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/src/vite.env.d.ts b/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/src/vite.env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/tsconfig.json b/apps/material-react-table-docs/examples/row-actions-buttons/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"
+    }
+  ]
+}
diff --git a/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/tsconfig.node.json b/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node"
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/apps/material-react-table-docs/examples/row-actions-buttons/sandbox/vite.config.js b/apps/material-react-table-docs/examples/row-actions-buttons/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()],
+});
diff --git a/apps/material-react-table-docs/examples/row-actions-menu-items/index.tsx b/apps/material-react-table-docs/examples/row-actions-menu-items/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+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="row-actions-menu-items"
+    />
+  );
+};
+
+export default ExampleTable;
diff --git a/apps/material-react-table-docs/examples/row-actions-menu-items/sandbox/.gitignore b/apps/material-react-table-docs/examples/row-actions-menu-items/sandbox/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/apps/material-react-table-docs/examples/row-actions-menu-items/sandbox/README.md b/apps/material-react-table-docs/examples/row-actions-menu-items/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/row-actions-menu-items/sandbox/index.html b/apps/material-react-table-docs/examples/row-actions-menu-items/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>
diff --git a/apps/material-react-table-docs/examples/row-actions-menu-items/sandbox/package.json b/apps/material-react-table-docs/examples/row-actions-menu-items/sandbox/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "material-react-table-example-minimal",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite --port 3001",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.11.0",
+    "@mui/material": "^5.11.4",
+    "material-react-table": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.0.1",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4"
+  }
+}