material-react-table-narender 1.0.0

package/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: KevinVandy

package/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,37 @@
+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

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

package/.prettierrc

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

package/CONTRIBUTING.md

@@ -0,0 +1,56 @@
+# 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/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Kevin Vandy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,215 @@
+# Material React Table V3
+
+View [Documentation](https://www.material-react-table.com/)
+
+<a href="https://npmjs.com/package/material-react-table" target="_blank">
+  <img alt="" src="https://badgen.net/npm/v/material-react-table?color=blue" />
+</a>
+<a href="https://npmtrends.com/material-react-table" target="_blank">
+  <img alt="" src="https://badgen.net/npm/dt/material-react-table?label=installs&icon=npm&color=blue" />
+</a>
+<a href="https://bundlephobia.com/result?p=material-react-table" target="_blank">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/material-react-table@latest?color=blue" />
+</a>
+<a href="https://star-history.com/#kevinvandy/material-react-table&Date" target="_blank">
+  <img alt="" src="https://badgen.net/github/stars/KevinVandy/material-react-table?color=blue" />
+</a>
+<a href="https://github.com/KevinVandy/material-react-table/blob/v3/LICENSE" target="_blank">
+  <img alt="" src="https://badgen.net/github/license/KevinVandy/material-react-table?color=blue" />
+</a>
+ <a
+  href="https://github.com/sponsors/kevinvandy"
+  target="_blank"
+  rel="noopener"
+>
+  <img alt="" src="https://img.shields.io/badge/sponsor-violet" />
+</a>
+<a
+  href="https://discord.gg/5wqyRx6fnm"
+  target="_blank"
+  rel="noopener"
+>
+  <img alt="" src="https://dcbadge.vercel.app/api/server/5wqyRx6fnm?style=flat">
+</a>
+
+## About
+
+### _Quickly Create React Data Tables with Material Design_
+
+### **Built with [Material UI <sup>V6</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)**
+
+<img src="https://material-react-table.com/banner.png" alt="MRT" height="50" />
+
+> Want to use Mantine instead of Material UI? Check out [Mantine React Table](https://www.mantine-react-table.com)
+
+## Learn More
+
+- Join the [Discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions
+- View the [Docs Website](https://www.material-react-table.com/)
+- See all [Props, Options, APIs, Components, and Hooks](https://www.material-react-table.com/docs/api)
+
+### Quick Examples
+
+- [Basic Table](https://www.material-react-table.com/docs/examples/basic/) (See Default Features)
+- [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
+- [Advanced Table](https://www.material-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)
+- [Custom Headless Table](https://www.material-react-table.com/docs/examples/custom-headless/) (Build your own table markup)
+- [Dragging / Ordering Examples](https://www.material-react-table.com/docs/examples/column-ordering/) (Drag and Drop)
+- [Editing (CRUD) Examples](https://www.material-react-table.com/docs/examples/editing-crud/) (Create, Edit, and Delete Rows)
+- [Expanding / Grouping Examples](https://www.material-react-table.com/docs/examples/aggregation-and-grouping/) (Sum, Average, Count, etc.)
+- [Filtering Examples](https://www.material-react-table.com/docs/examples/filter-variants/) (Faceted Values, Switching Filters, etc.)
+- [Sticky Pinning Examples](https://www.material-react-table.com/docs/examples/sticky-header/) (Sticky Headers, Sticky Columns, Sticky Rows, etc.)
+- [Remote Data Fetching Examples](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering)
+- [Virtualized Examples](https://www.material-react-table.com/docs/examples/virtualized/) (10,000 rows at once!)
+- [Infinite Scrolling](https://www.material-react-table.com/docs/examples/infinite-scrolling/) (Fetch data as you scroll)
+- [Localization (i18n)](https://www.material-react-table.com/docs/guides/localization#built-in-locale-examples) (Over a dozen languages built-in)
+
+View additional [storybook examples](https://www.material-react-table.dev/)
+
+## Features
+
+_All features can easily be enabled/disabled_
+
+_**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#guides) are available for all features**_
+
+- [x] 30-56kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
+- [x] Advanced TypeScript Generics Support (TypeScript Optional)
+- [x] Aggregation and Grouping (Sum, Average, Count, etc.)
+- [x] Cell Actions (Right-click Context Menu)
+- [x] Click To Copy Cell Values
+- [x] Column Action Dropdown Menu
+- [x] Column Hiding
+- [x] Column Ordering via Drag'n'Drop
+- [x] Column Pinning (Freeze Columns)
+- [x] Column Resizing
+- [x] Customize Icons
+- [x] Customize Styling of internal Mui Components
+- [x] Data Editing and Creating (5 different editing modes)
+- [x] Density Toggle
+- [x] Detail Panels (Expansion)
+- [x] Faceted Value Generation for Filter Options
+- [x] Filtering (supports client-side and server-side)
+- [x] Filter Match Highlighting
+- [x] Full Screen Mode
+- [x] Global Filtering (Search across all columns, rank by best match)
+- [x] Header Groups & Footers
+- [x] Localization (i18n) support
+- [x] Manage your own state or let the table manage it internally for you
+- [x] Pagination (supports client-side and server-side)
+- [x] Row Actions (Your Custom Action Buttons)
+- [x] Row Numbers
+- [x] Row Ordering via Drag'n'Drop
+- [x] Row Pinning
+- [x] Row Selection (Checkboxes)
+- [x] SSR compatible
+- [x] Sorting (supports client-side and server-side)
+- [x] Theming (Respects your Material UI Theme)
+- [x] Toolbars (Add your own action buttons)
+- [x] Tree Data / Expanding Sub-rows
+- [x] Virtualization (@tanstack/react-virtual)
+
+## Getting Started
+
+### Installation
+
+View the full [Installation Docs](https://www.material-react-table.com/docs/getting-started/install)
+
+1. Ensure that you have React 18 or later installed
+
+2. Install Peer Dependencies (Material UI V6)
+
+```bash
+npm install @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled
+```
+
+3. Install material-react-table
+
+```bash
+npm install material-react-table
+```
+
+> _`@tanstack/react-table`, `@tanstack/react-virtual`, and `@tanstack/match-sorter-utils`_ are internal dependencies, so you do NOT need to install them yourself.
+
+### Usage
+
+> Read the full usage docs [here](https://www.material-react-table.com/docs/getting-started/usage/)
+
+```jsx
+import { useMemo, useState, useEffect } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+} from 'material-react-table';
+
+//data must be stable reference (useState, useMemo, useQuery, defined outside of component, etc.)
+const data = [
+  {
+    name: 'John',
+    age: 30,
+  },
+  {
+    name: 'Sara',
+    age: 25,
+  },
+];
+
+export default function App() {
+  const columns = useMemo(
+    () => [
+      {
+        accessorKey: 'name', //simple recommended way to define a column
+        header: 'Name',
+        muiTableHeadCellProps: { sx: { color: 'green' } }, //optional custom props
+        Cell: ({ cell }) => <span>{cell.getValue()}</span>, //optional custom cell render
+      },
+      {
+        accessorFn: (row) => row.age, //alternate way
+        id: 'age', //id required if you use accessorFn instead of accessorKey
+        header: 'Age',
+        Header: () => <i>Age</i>, //optional custom header render
+      },
+    ],
+    [],
+  );
+
+  //optionally, you can manage any/all of the table state yourself
+  const [rowSelection, setRowSelection] = useState({});
+
+  useEffect(() => {
+    //do something when the row selection changes
+  }, [rowSelection]);
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableColumnOrdering: true, //enable some features
+    enableRowSelection: true,
+    enablePagination: false, //disable a default feature
+    onRowSelectionChange: setRowSelection, //hoist internal state to your own state (optional)
+    state: { rowSelection }, //manage your own state, pass it back to the table (optional)
+  });
+
+  const someEventHandler = () => {
+    //read the table state during an event from the table instance
+    console.log(table.getState().sorting);
+  };
+
+  return (
+    <MaterialReactTable table={table} /> //other more lightweight MRT sub components also available
+  );
+}
+```
+
+_Open in [Code Sandbox](https://codesandbox.io/s/simple-material-react-table-example-t5c3ji)_
+
+## Contributors
+
+<a href="https://github.com/kevinvandy/material-react-table/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=kevinvandy/material-react-table" />
+</a>
+
+PRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/KevinVandy/material-react-table/discussions) or the [Discord Server](https://discord.gg/5wqyRx6fnm) first if it is a large change!
+
+Read the [Contributing Guide](https://github.com/KevinVandy/material-react-table/blob/v3/CONTRIBUTING.md) to learn how to run this project locally.
+
+<!-- Use the FORCE, Luke! -->

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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,56 @@
+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>
+  );
+};