material-react-table-narender 1.0.0 → 2.13.3

package/packages/material-react-table/stories/styling/TableBodyCellStyles.stories.tsx

@@ -1,131 +0,0 @@
-import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
-import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
-
-const meta: Meta = {
-  title: 'Styling/Style Table Body Cells',
-};
-
-export default meta;
-
-const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
-  {
-    accessorKey: 'firstName',
-    header: 'First Name',
-  },
-  {
-    accessorKey: 'lastName',
-    header: 'Last Name',
-  },
-  {
-    accessorKey: 'age',
-    header: 'Age',
-  },
-  {
-    accessorKey: 'address',
-    header: 'Address',
-  },
-];
-const data = [...Array(21)].map(() => ({
-  address: faker.location.streetAddress(),
-  age: faker.number.int(80),
-  firstName: faker.person.firstName(),
-  lastName: faker.person.lastName(),
-}));
-
-export const DefaultTableBodyCellStyles = () => (
-  <MaterialReactTable columns={columns} data={data} />
-);
-
-export const StyleAllMuiTableBodyCell = () => (
-  <MaterialReactTable
-    columns={columns}
-    data={data}
-    muiTableBodyCellProps={{
-      sx: {
-        backgroundColor: 'rgba(52, 210, 235, 0.1)',
-        borderRight: '1px solid rgba(224,224,224,1)',
-      },
-    }}
-  />
-);
-
-export const StyleMuiTableBodyCellConditionallyIn1Column = () => (
-  <MaterialReactTable
-    columns={[
-      {
-        accessorKey: 'firstName',
-        header: 'First Name',
-      },
-      {
-        accessorKey: 'lastName',
-        header: 'Last Name',
-      },
-      {
-        accessorKey: 'age',
-        header: 'Age',
-        muiTableBodyCellProps: ({ cell }) => ({
-          sx: {
-            backgroundColor:
-              cell.getValue<number>() > 40
-                ? 'rgba(22, 184, 44, 0.5)'
-                : undefined,
-            fontWeight:
-              cell.column.id === 'age' && cell.getValue<number>() > 40
-                ? '700'
-                : '400',
-          },
-        }),
-      },
-      {
-        accessorKey: 'address',
-        header: 'Address',
-      },
-    ]}
-    data={data}
-  />
-);
-
-export const CustomCellRender = () => (
-  <MaterialReactTable
-    columns={[
-      {
-        Cell: ({ cell }) => (
-          <span style={{ fontStyle: 'italic' }}>{cell.getValue<string>()}</span>
-        ),
-        accessorKey: 'firstName',
-        header: 'First Name',
-      },
-      {
-        Cell: ({ cell }) => (
-          <span style={{ color: 'red' }}>{cell.getValue<string>()}</span>
-        ),
-        accessorKey: 'lastName',
-        header: 'Last Name',
-      },
-      {
-        Cell: ({ cell }) => (
-          <span
-            style={{
-              backgroundColor:
-                cell.column.id === 'age' && cell.getValue<number>() > 40
-                  ? 'rgba(22, 184, 44, 0.5)'
-                  : undefined,
-              fontStyle: 'italic',
-              padding: '0.5rem',
-            }}
-          >
-            {cell.getValue<string>()}
-          </span>
-        ),
-        accessorKey: 'age',
-        header: 'Age',
-      },
-      {
-        accessorKey: 'address',
-        header: 'Address',
-      },
-    ]}
-    data={data}
-  />
-);

package/packages/material-react-table/stories/styling/TableBodyRowStyles.stories.tsx

@@ -1,106 +0,0 @@
-import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
-import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
-
-const meta: Meta = {
-  title: 'Styling/Style Table Body Rows',
-};
-
-export default meta;
-
-const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
-  {
-    accessorKey: 'firstName',
-    header: 'First Name',
-  },
-  {
-    accessorKey: 'lastName',
-    header: 'Last Name',
-  },
-  {
-    accessorKey: 'age',
-    header: 'Age',
-  },
-  {
-    accessorKey: 'address',
-    header: 'Address',
-  },
-];
-const data = [...Array(21)].map(() => ({
-  address: faker.location.streetAddress(),
-  age: faker.number.int(80),
-  firstName: faker.person.firstName(),
-  lastName: faker.person.lastName(),
-}));
-
-export const DefaultTableBodyRowStyles = () => (
-  <MaterialReactTable columns={columns} data={data} />
-);
-
-export const DisableRowHoverEffect = () => (
-  <MaterialReactTable
-    columns={columns}
-    data={data}
-    muiTableBodyRowProps={{
-      hover: false,
-    }}
-  />
-);
-
-export const StyleMuiTableBodyRow = () => (
-  <MaterialReactTable
-    columns={columns}
-    data={data}
-    muiTableBodyRowProps={{
-      sx: {
-        backgroundColor: 'rgba(52, 210, 235, 0.1)',
-        borderRight: '1px solid rgba(224,224,224,1)',
-      },
-    }}
-  />
-);
-
-export const StyleCustomStripedRows = () => (
-  <MaterialReactTable
-    columns={columns}
-    data={data}
-    muiTableBodyCellProps={{ sx: { border: 'none' } }}
-    muiTableBodyProps={{
-      sx: () => ({
-        '& tr:nth-of-type(odd)': {
-          backgroundColor: 'limegreen',
-        },
-      }),
-    }}
-  />
-);
-
-export const StyleCustomStripedRowsDetailPanel = () => (
-  <MaterialReactTable
-    columns={columns}
-    data={data}
-    muiTableBodyCellProps={{ sx: { border: 'none' } }}
-    muiTableBodyProps={{
-      sx: () => ({
-        '& tr:nth-child(4n+3)': {
-          backgroundColor: 'limegreen',
-        },
-      }),
-    }}
-    renderDetailPanel={() => <div>Detail Panel</div>}
-  />
-);
-
-export const ConditionallyStyleMuiTableRow = () => (
-  <MaterialReactTable
-    columns={columns}
-    data={data}
-    muiTableBodyRowProps={({ row }) => ({
-      sx: {
-        backgroundColor:
-          row.getValue<number>('age') > 50 ? 'rgba(255, 54, 33, 0.18)' : '',
-        fontStyle: 'italic',
-      },
-    })}
-  />
-);

package/packages/material-react-table/stories/styling/TableDiminsions.stories.tsx

@@ -1,115 +0,0 @@
-import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
-import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
-
-const meta: Meta = {
-  title: 'Styling/Table Dimensions Examples',
-};
-
-export default meta;
-
-const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
-  {
-    accessorKey: 'firstName',
-    header: 'First Name',
-  },
-  {
-    accessorKey: 'lastName',
-    header: 'Last Name',
-  },
-  {
-    accessorKey: 'address',
-    header: 'Address',
-  },
-  {
-    accessorKey: 'state',
-    header: 'State',
-  },
-  {
-    accessorKey: 'phoneNumber',
-    header: 'Phone Number',
-  },
-];
-
-const data = [...Array(25)].map(() => ({
-  address: faker.location.streetAddress(),
-  firstName: faker.person.firstName(),
-  lastName: faker.person.lastName(),
-  phoneNumber: faker.phone.number(),
-  state: faker.location.state(),
-}));
-
-export const MaxWidthAndCentered = () => (
-  <MaterialReactTable
-    columns={columns}
-    data={data}
-    muiTablePaperProps={{
-      sx: {
-        m: 'auto',
-        maxWidth: '800px',
-      },
-    }}
-  />
-);
-
-export const maxHeight = () => (
-  <MaterialReactTable
-    columns={columns}
-    data={data}
-    muiTableContainerProps={{
-      sx: {
-        maxHeight: '500px',
-      },
-    }}
-  />
-);
-
-export const minHeight = () => (
-  <MaterialReactTable
-    columns={columns}
-    data={data.slice(0, 5)}
-    muiTableContainerProps={{
-      sx: {
-        minHeight: '800px',
-      },
-    }}
-  />
-);
-
-export const minHeightParent = () => (
-  <div style={{ height: '700px' }}>
-    <MaterialReactTable
-      columns={columns}
-      data={data.slice(0, 5)}
-      muiTableContainerProps={({ table }) => ({
-        sx: {
-          height: `calc(100% - ${table.refs.topToolbarRef.current?.offsetHeight}px - ${table.refs.bottomToolbarRef.current?.offsetHeight}px)`,
-        },
-      })}
-      muiTablePaperProps={{
-        sx: {
-          height: '100%',
-        },
-      }}
-    />
-  </div>
-);
-
-export const ContainerHeight = () => (
-  <div style={{ height: '300px' }}>
-    <MaterialReactTable
-      columns={columns}
-      data={data}
-      muiTableContainerProps={({ table }) => ({
-        sx: {
-          height: `calc(100% - ${table.refs.topToolbarRef.current?.offsetHeight}px - ${table.refs.bottomToolbarRef.current?.offsetHeight}px)`,
-        },
-      })}
-      muiTablePaperProps={{
-        sx: {
-          height: '100%',
-        },
-      }}
-    />
-  </div>
-);

package/packages/material-react-table/stories/styling/TableHeadCellStyles.stories.tsx

@@ -1,129 +0,0 @@
-import Box from '@mui/material/Box';
-import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
-import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
-
-const meta: Meta = {
-  title: 'Styling/Style Table Head Cells',
-};
-
-export default meta;
-
-const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
-  {
-    accessorKey: 'firstName',
-    header: 'First Name',
-  },
-  {
-    accessorKey: 'lastName',
-    header: 'Last Name',
-  },
-  {
-    accessorKey: 'age',
-    header: 'Age',
-  },
-  {
-    accessorKey: 'address',
-    header: 'Address',
-  },
-];
-const data = [...Array(21)].map(() => ({
-  address: faker.location.streetAddress(),
-  age: faker.number.int(80),
-  firstName: faker.person.firstName(),
-  lastName: faker.person.lastName(),
-}));
-
-export const DefaultTableHeadCellStyles = () => (
-  <MaterialReactTable columns={columns} data={data} />
-);
-
-export const ColorSortIcon = () => (
-  <MaterialReactTable
-    columns={columns}
-    data={data}
-    muiTableHeadCellProps={({ column }) => ({
-      sx: {
-        '& .MuiTableSortLabel-root svg': {
-          color: column.getIsSorted() ? 'limegreen !important' : undefined,
-        },
-      },
-    })}
-  />
-);
-
-export const StyleAllMuiTableHeadCell = () => (
-  <MaterialReactTable
-    columns={columns}
-    data={data}
-    muiTableHeadCellProps={{
-      sx: (theme) => ({
-        background: 'rgba(52, 210, 235, 0.1)',
-        borderRight: '1px solid rgba(224,224,224,1)',
-        color: theme.palette.text.primary,
-      }),
-    }}
-  />
-);
-
-export const StyleTableHeadCellsIndividually = () => (
-  <MaterialReactTable
-    columns={[
-      {
-        accessorKey: 'firstName',
-        header: 'First Name',
-      },
-      {
-        accessorKey: 'lastName',
-        header: 'Last Name',
-        muiTableHeadCellProps: {
-          sx: (theme) => ({ color: theme.palette.primary.main }),
-        },
-      },
-      {
-        accessorKey: 'age',
-        header: 'Age',
-        muiTableHeadCellProps: {
-          sx: {
-            color: 'red',
-          },
-        },
-      },
-      {
-        accessorKey: 'address',
-        header: 'Address',
-      },
-    ]}
-    data={data}
-  />
-);
-
-export const CustomHeadCellRenders = () => (
-  <MaterialReactTable
-    columns={[
-      {
-        Header: <em>First Name</em>,
-        accessorKey: 'firstName',
-        header: 'First Name',
-      },
-      {
-        Header: () => <em>Last Name</em>,
-        accessorKey: 'lastName',
-        header: 'Last Name',
-      },
-      {
-        Header: ({ column }) => (
-          <Box color="primary.main">{column.columnDef.header}</Box>
-        ),
-        accessorKey: 'age',
-        header: 'Current Age',
-      },
-      {
-        accessorKey: 'address',
-        header: 'Address of Residence (Permanent)',
-      },
-    ]}
-    data={data}
-    enableColumnResizing
-  />
-);

package/packages/material-react-table/stories/styling/TablePaper.stories.tsx

@@ -1,50 +0,0 @@
-import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
-import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
-
-const meta: Meta = {
-  title: 'Styling/Table Paper Examples',
-};
-
-export default meta;
-
-const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
-  {
-    accessorKey: 'firstName',
-    header: 'First Name',
-  },
-  {
-    accessorKey: 'lastName',
-    header: 'Last Name',
-  },
-  {
-    accessorKey: 'address',
-    header: 'Address',
-  },
-  {
-    accessorKey: 'state',
-    header: 'State',
-  },
-  {
-    accessorKey: 'phoneNumber',
-    header: 'Phone Number',
-  },
-];
-
-const data = [...Array(25)].map(() => ({
-  address: faker.location.streetAddress(),
-  firstName: faker.person.firstName(),
-  lastName: faker.person.lastName(),
-  phoneNumber: faker.phone.number(),
-  state: faker.location.state(),
-}));
-
-export const NoBoxShadow = () => (
-  <MaterialReactTable
-    columns={columns}
-    data={data}
-    muiTablePaperProps={{
-      elevation: 0,
-    }}
-  />
-);

package/packages/material-react-table/stories/styling/Theming.stories.tsx

@@ -1,80 +0,0 @@
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
-import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
-
-const meta: Meta = {
-  title: 'Styling/Theming',
-};
-
-export default meta;
-
-const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
-  {
-    accessorKey: 'firstName',
-    header: 'First Name',
-  },
-  {
-    accessorKey: 'lastName',
-    header: 'Last Name',
-  },
-  {
-    accessorKey: 'age',
-    header: 'Age',
-  },
-  {
-    accessorKey: 'address',
-    header: 'Address',
-  },
-];
-
-const data = [...Array(21)].map(() => ({
-  address: faker.location.streetAddress(),
-  age: faker.number.int(80),
-  firstName: faker.person.firstName(),
-  lastName: faker.person.lastName(),
-}));
-
-export const DefaultTheme = () => (
-  <MaterialReactTable columns={columns} data={data} enableRowSelection />
-);
-
-export const CustomLightTheme = () => {
-  const theme = createTheme({
-    palette: {
-      background: {
-        default: '#ffffef',
-      },
-      primary: {
-        main: '#ff9800',
-      },
-      secondary: {
-        main: '#00bcd4',
-      },
-    },
-  });
-  return (
-    <ThemeProvider theme={theme}>
-      <MaterialReactTable columns={columns} data={data} enableRowSelection />
-    </ThemeProvider>
-  );
-};
-
-export const CustomDarkTheme = () => {
-  const theme = createTheme({
-    palette: {
-      mode: 'dark',
-      primary: {
-        main: '#81980f',
-      },
-      secondary: {
-        main: '#00bcd4',
-      },
-    },
-  });
-  return (
-    <ThemeProvider theme={theme}>
-      <MaterialReactTable columns={columns} data={data} enableRowSelection />
-    </ThemeProvider>
-  );
-};

package/packages/material-react-table/tsconfig.json

@@ -1,36 +0,0 @@
-{
-  "include": [
-    "src",
-    "@types/node",
-    "stories"
-  ],
-  "compilerOptions": {
-    "declaration": true,
-    "declarationDir": "types",
-    "emitDeclarationOnly": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "importHelpers": true,
-    "jsx": "react-jsx",
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext"
-    ],
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitReturns": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true,
-    "target": "ES6",
-  },
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
-}

package/packages/material-react-table/tsconfig.node.json

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

package/packages/material-react-table/vite.config.ts

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

package/pnpm-workspace.yaml

@@ -1,3 +0,0 @@
-packages:
-  - "apps/*"
-  - "packages/*"