material-react-table-narender 1.0.0 → 3.0.3

package/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,85 +0,0 @@
-name: '🐛 Bug report'
-description: Report a reproducible bug or regression
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thank you for reporting an issue :pray:
-
-        Before submitting a new bug/issue, please check the links below to see if there is a solution or question posted there already:
-        - material-react-table's [Discussions tab](https://github.com/material/material-react-table/discussions)
-        - material-react-table's [Open Issues](https://github.com/KevinVandy/material-react-table/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc)
-        - material-react-table's [Closed Issues](https://github.com/KevinVandy/material-react-table/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed)
-
-        The more information you fill in, the better the community can help you.
-
-  - type: input
-    id: mrt-library-version
-    attributes:
-      label: material-react-table version
-      description: |
-        - Please let us know the exact version of material-react-table you were using when the issue occurred. If you are using an older version, check to see if your bug has already been solved in the latest version. 
-        - The latest version is <img alt="" src="https://badgen.net/npm/v/material-react-table" />
-      placeholder: |
-        e.g. v1.3.4
-    validations:
-      required: true
-
-  - type: input
-    id: react-library-version
-    attributes:
-      label: react & react-dom versions
-      description: Material UI V6 requires React and React-Dom v17 or higher
-      placeholder: |
-        e.g. v17.0.2
-    validations:
-      required: true
-
-  - type: textarea
-    id: description
-    attributes:
-      label: Describe the bug and the steps to reproduce it
-      description: Provide a clear and concise description of the challenge you are running into, and the steps we should take to try to reproduce your bug.
-    validations:
-      required: true
-
-  - type: textarea
-    id: link
-    attributes:
-      label: Minimal, Reproducible Example - (Optional, but Recommended)
-      description: |
-        Please add a link to a minimal reproduction. This can really speed up the diagnosis of the problem! A Code Sandbox is preferable, but simple code snippets are also acceptable here. Feel free to fork any of the official CodeSandbox examples: https://github.com/KevinVandy/material-react-table/tree/v3/apps/material-react-table-docs/examples
-      placeholder: |
-        e.g. Code Sandbox, Stackblitz, or relevant code snippets.
-    validations:
-      required: true
-
-  - type: textarea
-    id: screenshots_or_videos
-    attributes:
-      label: Screenshots or Videos (Optional)
-      description: |
-        If applicable, add screenshots or a video to help explain your problem.
-      placeholder: |
-        You can drag your video or image files inside of this editor ↓
-
-  - type: dropdown
-    attributes:
-      options:
-        - No, because I do not know how
-        - No, because I do not have time to dig into it
-        - Maybe, I'll investigate and start debugging
-        - Yes, I think I know how to fix it and will discuss it in the comments of this issue
-        - Yes, I am also opening a PR that solves the problem along side this issue
-      label: Do you intend to try to help solve this bug with your own PR?
-      description: |
-        If you think you know the cause of the problem, the fastest way to get it fixed is to suggest a fix, or fix it yourself! However, it is ok if you cannot solve this yourself and are just wanting help.
-
-  - type: checkboxes
-    id: agrees-to-terms
-    attributes:
-      label: Terms
-      description: By submitting this issue, you agree to follow our Code of Conduct and can verify that you have followed the requirements outlined above to the best of your ability.
-      options:
-        - label: I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
-          required: true

package/.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Feature Requests & Questions
-    url: https://github.com/KevinVandy/material-react-table/discussions
-    about: Please ask and answer questions here, but don't report bugs here! That's what bug reports/issues are for!
-  - name: Community Chat
-    url: https://discord.gg/5wqyRx6fnm
-    about: Join the Discord to discuss bugs, feature clarifications, and the general direction of the project!

package/.github/workflows/main.yml

@@ -1,27 +0,0 @@
-name: Upgrade Example Versions
-
-on:
-  push:
-    branches:
-      - 'v3'
-    paths:
-      - 'packages/material-react-table/package.json'
-
-jobs:
-  run-example-upgrades:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout source code
-        uses: actions/checkout@v3
-
-      - name: run-sh-script
-        run: sh upgrade-examples.sh
-
-      - name: Commit and push changes
-        run: |
-          git config --global user.name 'KevinVandy'
-          git config --global user.email 'kevinvandy@users.noreply.github.com'
-          git add -A
-          git commit -m "Upgrade Examples" || exit 0  # in case no changes present
-          git push origin ${{ github.head_ref }}

package/.github/workflows/pr.yml

@@ -1,37 +0,0 @@
-name: Clean PR
-
-on:
-  pull_request:
-    branches:
-      - v3
-
-jobs:
-  clean-pr:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v3
-        with:
-          ref: ${{ github.head_ref }}
-
-      - name: Setup PNPM
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8.8.0
-
-      - name: Install Dependencies
-        run: pnpm i
-
-      - name: Run Lint
-        run: pnpm run lint -- --fix
-
-      - name: Run Prettier
-        run: pnpm format
-
-      - name: Commit and Push Changes
-        run: |
-          git config --global user.name 'KevinVandy'
-          git config --global user.email 'kevinvandy@users.noreply.github.com'
-          git add -A
-          git commit -m "Lint and Prettier" || exit 0  # in case no changes present
-          git push origin ${{ github.head_ref }}

package/.prettierignore

@@ -1,8 +0,0 @@
-dist
-storybook-static
-node_modules
-types
-*.json
-.next
-*.md
-apps/material-react-table-docs/.next

package/.prettierrc

@@ -1,6 +0,0 @@
-{
-  "printWidth": 80,
-  "semi": true,
-  "singleQuote": true,
-  "trailingComma": "all"
-}

package/CONTRIBUTING.md

@@ -1,56 +0,0 @@
-# Contributing to Material React Table
-
-<a href="http://makeapullrequest.com" target="_blank">
-  <img alt="" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" />
-</a>
-
-## Suggesting New Features or Bug Fixes
-
-Before making large PRs, you may want to discuss your proposals in either the [Discord Contributing Channel](https://discord.gg/5wqyRx6fnm), the [GitHub Discussions](https://github.com/KevinVandy/material-react-table/discussions) page, or the [GitHub Issues](https://github.com/KevinVandy/material-react-table/issues) page.
-
-## Running the project locally
-
-This project uses PNPM and a TurboRepo with 2 projects.
-
-- The library itself in `/packages/material-react-table` which also contains a storybook site for local development
-- The docs site in `/apps/material-react-table-docs`
-
-### 1. Fork and Clone the project
-
-Create your own fork, clone, and then make a feature/bugfix branch off of `v2`. Branch name does not really matter.
-
-### 2. Install Dependencies
-
-```bash
-pnpm i
-```
-
-### 3. Run the project(s)
-
-#### Run the Storybook for Local Development
-
-```bash
-pnpm storybook
-```
-
-The Storybook site will open on `port 6006` by default.
-
-#### Run the Docs for Local Development
-
-```bash
-pnpm docs:dev
-```
-
-The Docs site will open on `port 3000` by default.
-
-> Note: If you are contributing a new locale and are trying to test it in the docs site, you will need to run `pnpm lib:build-locales` and then `pnpm docs:dev` before it can be imported.
-
-#### Fully Build the Library
-
-```bash
-create dist folder inside packages\material-react-table
-pnpm lib:build
-D:\material-react-table\packages\material-react-table> pnpm lib:build
-```
-
-> Note: After building the library, if you are running the docs site locally, it will use the compiled output of the dist folder. This can be annoying if you are trying to test changes to the library in the docs site itself. Just delete the `/dist` folder and restart the docs app to test lib changes in the docs site.

package/apps/material-react-table-docs/README.md

@@ -1,34 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

package/apps/material-react-table-docs/components/mdx/AnchorLink.tsx

@@ -1,16 +0,0 @@
-import { Link as MuiLink } from '@mui/material';
-import Link from 'next/link';
-
-export const AnchorLink = (props) => {
-  return (
-    <Link href={props.href} passHref legacyBehavior>
-      <MuiLink
-        target={props.href.startsWith('http') ? '_blank' : undefined}
-        rel="noopener"
-        {...props}
-      >
-        {props.children}
-      </MuiLink>
-    </Link>
-  );
-};

package/apps/material-react-table-docs/components/mdx/Blockquote.tsx

@@ -1,21 +0,0 @@
-import { alpha, darken, useMediaQuery, useTheme } from '@mui/material';
-
-export const Blockquote = (props) => {
-  const theme = useTheme();
-  const isMobile = useMediaQuery('(max-width: 720px)');
-  return (
-    <blockquote
-      style={{
-        borderLeft: `solid 8px ${alpha(
-          darken(theme.palette.secondary.main, 0.2),
-          0.6,
-        )}`,
-        padding: '0.5rem 1rem',
-        backgroundColor: alpha(theme.palette.primary.main, 0.05),
-        borderRadius: '4px',
-        margin: isMobile ? '1rem' : '3rem',
-      }}
-      {...props}
-    />
-  );
-};

package/apps/material-react-table-docs/components/mdx/BlogAuthor.tsx

@@ -1,56 +0,0 @@
-import Image from 'next/image';
-import { Box, Link, Stack, Typography } from '@mui/material';
-
-interface Props {
-  author?: string;
-  authorImage?: string;
-  authorLink?: string;
-  publishDate: string;
-}
-
-export const BlogAuthor = ({
-  author = 'Kevin Van Cott',
-  authorImage = '/contributors/kevinvancott.jpg',
-  authorLink = 'https://www.kevinvancott.dev',
-  publishDate,
-}: Props) => {
-  return (
-    <Stack>
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'auto 50px',
-          gap: '1rem',
-          justifyContent: 'flex-start',
-          alignItems: 'center',
-        }}
-      >
-        <Typography fontSize="14pt" variant="caption">
-          By{' '}
-          <Link
-            color="text.primary"
-            sx={{
-              textDecoration: 'none',
-              '&:hover': { textDecoration: 'underline' },
-            }}
-            target="_blank"
-            rel="noopener noreferrer"
-            href={authorLink}
-          >
-            {author}
-          </Link>
-        </Typography>
-        <Image
-          alt="author"
-          src={authorImage}
-          width={30}
-          height={30}
-          style={{ borderRadius: '50%' }}
-        />
-      </Box>
-      <Typography color="text.secondary">
-        Published: <i>{new Date(publishDate).toLocaleDateString()}</i>
-      </Typography>
-    </Stack>
-  );
-};

package/apps/material-react-table-docs/components/mdx/ComparisonTable.tsx

@@ -1,161 +0,0 @@
-import { Box, Link, Paper } from '@mui/material';
-import {
-  MRT_TableContainer,
-  type MRT_ColumnDef,
-  useMaterialReactTable,
-} from 'material-react-table';
-
-const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
-  {
-    accessorKey: 'library',
-    header: 'Library',
-    size: 250,
-    Cell: ({ cell, row }) => (
-      <Link
-        href={row.original.libraryLink}
-        target="_blank"
-        rel="noopener"
-        sx={(theme) => ({
-          color:
-            cell.getValue() === 'Material React Table'
-              ? theme.palette.primary.main
-              : cell.getValue() === 'Mantine React Table'
-                ? theme.palette.secondary.light
-                : cell.getValue() === 'TanStack Table (React Table)'
-                  ? theme.palette.error.main
-                  : theme.palette.text.primary,
-          fontWeight: 'bold',
-          textDecoration: 'none',
-          '&:hover': {
-            textDecoration: 'underline',
-          },
-        })}
-      >
-        <>{cell.getValue<string>()}</>
-      </Link>
-    ),
-  },
-  {
-    accessorKey: 'freeOrLicensed',
-    header: 'Free or Licensed',
-    size: 80,
-  },
-  {
-    accessorKey: 'bundleSize',
-    header: 'Bundle Size',
-    Cell: ({ cell, row }) => (
-      <Box sx={{ display: 'flex', alignContent: 'center', gap: '1ch' }}>
-        {`${cell.getValue<string>()} KB`}
-        <a href={row.original.bundlePhobiaLink} target="_blank" rel="noopener">
-          <img
-            alt={cell.getValue<string>()}
-            loading="lazy"
-            src={row.original.bundlePhobiaImg}
-          />
-        </a>
-      </Box>
-    ),
-    size: 250,
-    sortDescFirst: false,
-  },
-  {
-    accessorKey: 'description',
-    header: 'Description',
-    size: 500,
-  },
-];
-
-const data = [
-  {
-    library: 'Material React Table',
-    libraryLink: '#',
-    freeOrLicensed: 'Free MIT',
-    bundleSize: 53,
-    bundlePhobiaImg:
-      'https://badgen.net/bundlephobia/minzip/material-react-table@latest?color=blue',
-    bundlePhobiaLink:
-      'https://bundlephobia.com/package/material-react-table@latest',
-    description:
-      'Built on top of TanStack Table V8 and Material UI V6, Material React Table (MRT) is a batteries-included React table library that attempts to provide all the table features you need while trying to stay as highly performant and lightweight as possible. Customization is treated as a top priority to let you override any styles you need to change. Initially built in 2022, so it is still somewhat new.',
-  },
-  {
-    library: 'Mantine React Table',
-    libraryLink: 'https://www.mantine-react-table.com',
-    freeOrLicensed: 'Free MIT',
-    bundleSize: 48,
-    bundlePhobiaImg:
-      'https://badgen.net/bundlephobia/minzip/mantine-react-table@latest?color=blue',
-    bundlePhobiaLink:
-      'https://bundlephobia.com/package/mantine-react-table@latest',
-    description:
-      'Mantine React Table is Material React Table\'s sister library. It was forked from Material React Table and just uses Mantine instead of Material UI. If you want a more "pure" CSS component library to use with MRT, or you are a Tailwind user, then Mantine React Table might actually be a better fit for you.',
-  },
-  {
-    library: 'TanStack Table (React Table)',
-    libraryLink: 'https://tanstack.com/table',
-    freeOrLicensed: 'Free MIT',
-    bundleSize: 14,
-    bundlePhobiaImg:
-      'https://badgen.net/bundlephobia/minzip/@tanstack/react-table@latest',
-    bundlePhobiaLink:
-      'https://bundlephobia.com/package/@tanstack/react-table@latest',
-    description:
-      'TanStack Table (formerly React Table) is a lightweight Headless UI library for building powerful tables and datagrids. No CSS or components included. You use logic from the useReactTable hook to build your own table components. No batteries included, but you get total control of your markup and styles (Material React Table is built on top of TanStack Table).',
-  },
-  {
-    library: 'Material Table',
-    libraryLink: 'https://material-table.com',
-    freeOrLicensed: 'Free MIT',
-    bundleSize: 185,
-    bundlePhobiaImg:
-      'https://badgen.net/bundlephobia/minzip/material-table?color=red',
-    bundlePhobiaLink: 'https://bundlephobia.com/package/material-table@latest',
-    description:
-      'Material Table is a once-popular Material UI table library originally built in 2018 for creating Material UI tables that includes tons of features. However, it has a very large bundle size and contains outdated and insecure dependencies. It is mostly unmaintained now but did recently release a version that was somewhat compatible with Material UI V6.',
-  },
-  {
-    library: 'MUI Datatables',
-    libraryLink: 'https://github.com/gregnb/mui-datatables',
-    freeOrLicensed: 'Free MIT',
-    bundleSize: 96,
-    bundlePhobiaImg:
-      'https://badgen.net/bundlephobia/minzip/mui-datatables?color=orange',
-    bundlePhobiaLink: 'https://bundlephobia.com/package/mui-datatables@latest',
-    description:
-      'MUI Datatables is a solid Material UI-based table library that was originally built in 2017. It has a lot of features and is very customizable. However, it is not as lightweight as MRT and has a lot of dependencies. The library appears to still be kept up to date occasionally, but its documentation site is no longer available. Some of the UI layouts in MUI Datatables served as inspiration for Material React Table.',
-  },
-  {
-    library: 'MUI X Data Grid MIT/Pro/Premium',
-    libraryLink: 'https://mui.com/store/items/mui-x-premium/',
-    freeOrLicensed: 'MIT or Paid License',
-    bundleSize: 135,
-    bundlePhobiaImg:
-      'https://badgen.net/bundlephobia/minzip/@mui/x-data-grid-pro?color=orange',
-    bundlePhobiaLink:
-      'https://bundlephobia.com/package/@mui/x-data-grid-pro@latest',
-    description:
-      'MUI X Data Grid MIT/Pro/Premium is one of the best Material UI Data Grid options available and it comes directly from MUI. It includes the full suite of features you may need but requires a paid license for many of the advanced features.',
-  },
-  {
-    library: 'AG Grid Community/Enterprise',
-    libraryLink: 'https://www.ag-grid.com/license-pricing',
-    freeOrLicensed: 'MIT or Paid License',
-    bundleSize: 332,
-    bundlePhobiaImg:
-      'https://badgen.net/bundlephobia/minzip/ag-grid-enterprise?color=red',
-    bundlePhobiaLink:
-      'https://bundlephobia.com/package/ag-grid-enterprise@latest',
-    description:
-      'AG Grid Community/Enterprise is arguably the best table library of all time, but many of the advanced features require an expensive paid license. It appears to have a very large bundle size, although this is a bit misleading because it is tree-shakable and includes a lot of the UI components in the bundle. It is not built on top of Material UI, but it does follow Material Design, so it is definitely relevant to this comparison.',
-  },
-];
-
-export const ComparisonTable = () => {
-  const table = useMaterialReactTable({
-    columns,
-    data,
-    enableColumnActions: false,
-  });
-
-  return <MRT_TableContainer component={Paper} table={table} />;
-};

package/apps/material-react-table-docs/components/mdx/CompatibilityTable.tsx

@@ -1,115 +0,0 @@
-import React from 'react';
-import {
-  MRT_ColumnDef,
-  MRT_TableContainer,
-  useMaterialReactTable,
-} from 'material-react-table';
-
-const columns: MRT_ColumnDef<any>[] = [
-  {
-    accessorKey: 'mrtVersion',
-    header: 'MRT',
-  },
-  {
-    accessorKey: 'reactVersion',
-    header: 'React',
-    size: 100,
-  },
-  {
-    accessorKey: 'muiVersion',
-    header: 'Material UI',
-    size: 100,
-  },
-  {
-    accessorKey: 'muiIconsVersion',
-    header: ' MUI Icons',
-    size: 100,
-  },
-  {
-    accessorKey: 'muiXDatePickers',
-    header: 'MUI X Date Pickers',
-  },
-  {
-    accessorKey: 'emotionVersion',
-    header: 'Emotion',
-    size: 100,
-  },
-  {
-    accessorKey: 'pigmentCSS',
-    header: 'Pigment CSS',
-  },
-];
-
-const data = [
-  {
-    mrtVersion: '1.x',
-    muiVersion: '5.0+',
-    muiXDatePickers: 'Optional',
-    reactVersion: '17.0+',
-    muiIconsVersion: '5.0+',
-    emotionVersion: '11.0+',
-    pigmentCSS: '-',
-  },
-  {
-    mrtVersion: '2.x',
-    muiVersion: '5.13+',
-    muiXDatePickers: '6.15+',
-    reactVersion: '17.0+',
-    muiIconsVersion: '5.0+',
-    emotionVersion: '11.0+',
-    pigmentCSS: '-',
-  },
-  {
-    mrtVersion: '3.x (This Version)',
-    muiVersion: '6.0+',
-    muiXDatePickers: '7.15.0+',
-    reactVersion: '18.0+',
-    muiIconsVersion: '6.0+',
-    emotionVersion: '11.0+',
-    pigmentCSS: 'Optional',
-  },
-  {
-    mrtVersion: '4.x (Next Version)',
-    muiVersion: '6.0+',
-    muiXDatePickers: '7.15.0+',
-    reactVersion: '18.0+',
-    muiIconsVersion: '6.0+',
-    emotionVersion: 'Optional',
-    pigmentCSS: 'Optional',
-  },
-];
-
-export const CompatibilityTable = () => {
-  const table = useMaterialReactTable({
-    columns,
-    data,
-    defaultColumn: {
-      muiTableHeadCellProps: {
-        sx: {
-          fontSize: '16px',
-        },
-      },
-      muiTableBodyCellProps: ({ row }) => ({
-        sx: (theme) => ({
-          fontSize: '16px',
-          fontWeight: row.original.mrtVersion.includes('This Version')
-            ? 'bold'
-            : 'normal',
-          color: row.original.mrtVersion.includes('This Version')
-            ? `${theme.palette.primary.main}`
-            : 'inherit',
-        }),
-      }),
-    },
-    enableColumnActions: false,
-    initialState: {
-      sorting: [
-        {
-          id: 'mrtVersion',
-          desc: true,
-        },
-      ],
-    },
-  });
-  return <MRT_TableContainer table={table} />;
-};