Merge with base repository

.gitignore

@@ -39,3 +39,5 @@ yarn-error.log*
 
 # turbo
 .turbo
+
+*storybook.log

CONTRIBUTING.md

@@ -17,7 +17,7 @@ This project uses PNPM and a TurboRepo with 2 projects.
 
 ### 1. Fork and Clone the project
 
-Create your own fork, clone, and then make a feature/bugfix branch off of `main`. Branch name does not really matter.
+Create your own fork, clone, and then make a feature/bugfix branch off of `v2`. Branch name does not really matter.
 
 ### 2. Install Dependencies
 
@@ -51,4 +51,4 @@ The Docs site will open on `port 3000` by default.
 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 to test lib changes in the docs site.
+> 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.

README.md

@@ -1,4 +1,4 @@
-# Material React Table
+# Material React Table V2
 
 View [Documentation](https://www.material-react-table.com/)
 
@@ -17,39 +17,52 @@ View [Documentation](https://www.material-react-table.com/)
 <a href="https://github.com/KevinVandy/material-react-table/blob/v2/LICENSE" target="_blank">
   <img alt="" src="https://badgen.net/github/license/KevinVandy/material-react-table?color=blue" />
 </a>
-<a href="http://makeapullrequest.com" target="_blank">
-  <img alt="" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" />
+ <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>V5</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
+### **Built with [Material UI <sup>V5</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"/>
+<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, and APIs](https://www.material-react-table.com/docs/api)
+- 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)
- - [Aggregation/Grouping](https://www.material-react-table.com/docs/examples/aggregation-and-grouping/) (Aggregation features such as Sum, Average, Count, etc.)
- - [Data Export Table](https://www.material-react-table.com/docs/examples/data-export/) (Export to CSV, Excel, etc.)
- - [Editing CRUD Table](https://www.material-react-table.com/docs/examples/editing-crud/) (Create, Edit, and Delete Rows)
- - [Remote Data](https://www.material-react-table.com/docs/examples/remote/) (Server-side Pagination, Sorting, and Filtering)
- - [React Query](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering, simplified)
- - [Virtualized Rows](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)
+- [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/)
 
@@ -59,9 +72,10 @@ _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] < 47kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
+- [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
@@ -70,7 +84,7 @@ _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#gui
 - [x] Column Resizing
 - [x] Customize Icons
 - [x] Customize Styling of internal Mui Components
-- [x] Data Editing (4 different editing modes)
+- [x] Data Editing and Creating (5 different editing modes)
 - [x] Density Toggle
 - [x] Detail Panels (Expansion)
 - [x] Faceted Value Generation for Filter Options
@@ -85,6 +99,7 @@ _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#gui
 - [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)
@@ -99,12 +114,12 @@ _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#gui
 
 View the full [Installation Docs](https://www.material-react-table.com/docs/getting-started/install)
 
-1. Ensure that you have React 17 or later installed (Material UI V5 requires React 17 or 18)
+1. Ensure that you have React 18 or later installed
 
 2. Install Peer Dependencies (Material UI V5)
 
 ```bash
-npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
+npm install @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled
 ```
 
 3. Install material-react-table
@@ -120,9 +135,13 @@ npm install material-react-table
 > Read the full usage docs [here](https://www.material-react-table.com/docs/getting-started/usage/)
 
 ```jsx
-import { useMemo, useRef, useState, useEffect } from 'react';
-import { MaterialReactTable } from 'material-react-table';
+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',
@@ -132,7 +151,7 @@ const data = [
     name: 'Sara',
     age: 25,
   },
-]
+];
 
 export default function App() {
   const columns = useMemo(
@@ -160,25 +179,23 @@ export default function App() {
     //do something when the row selection changes
   }, [rowSelection]);
 
-  //Or, optionally, you can get a reference to the underlying table instance
-  const tableInstanceRef = useRef(null);
+  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 ref
-    console.log(tableInstanceRef.current.getState().sorting);
-  }
+    //read the table state during an event from the table instance
+    console.log(table.getState().sorting);
+  };
 
   return (
-    <MaterialReactTable 
-      columns={columns} 
-      data={data} 
-      enableColumnOrdering //enable some features
-      enableRowSelection 
-      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)
-      tableInstanceRef={tableInstanceRef} //get a reference to the underlying table instance (optional)
-    />
+    <MaterialReactTable table={table} /> //other more lightweight MRT sub components also available
   );
 }
 ```

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

@@ -1,5 +1,9 @@
-import { Box, Link } from '@mui/material';
-import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+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]>[] = [
   {
@@ -15,9 +19,11 @@ const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
           color:
             cell.getValue() === 'Material React Table'
               ? theme.palette.primary.main
-              : cell.getValue() === 'TanStack Table (React Table)'
-              ? theme.palette.secondary.light
-              : theme.palette.text.primary,
+              : 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': {
@@ -64,19 +70,31 @@ const data = [
     library: 'Material React Table',
     libraryLink: '#',
     freeOrLicensed: 'Free MIT',
-    bundleSize: 47,
+    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 V5, 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: 13,
+    bundleSize: 14,
     bundlePhobiaImg:
       'https://badgen.net/bundlephobia/minzip/@tanstack/react-table@latest',
     bundlePhobiaLink:
@@ -110,7 +128,7 @@ const data = [
     library: 'MUI X Data Grid MIT/Pro/Premium',
     libraryLink: 'https://mui.com/store/items/mui-x-premium/',
     freeOrLicensed: 'MIT or Paid License',
-    bundleSize: 123,
+    bundleSize: 135,
     bundlePhobiaImg:
       'https://badgen.net/bundlephobia/minzip/@mui/x-data-grid-pro?color=orange',
     bundlePhobiaLink:
@@ -122,7 +140,7 @@ const data = [
     library: 'AG Grid Community/Enterprise',
     libraryLink: 'https://www.ag-grid.com/license-pricing',
     freeOrLicensed: 'MIT or Paid License',
-    bundleSize: 270,
+    bundleSize: 332,
     bundlePhobiaImg:
       'https://badgen.net/bundlephobia/minzip/ag-grid-enterprise?color=red',
     bundlePhobiaLink:
@@ -133,14 +151,11 @@ const data = [
 ];
 
 export const ComparisonTable = () => {
-  return (
-    <MaterialReactTable
-      columns={columns}
-      data={data}
-      enablePagination={false}
-      enableColumnActions={false}
-      enableBottomToolbar={false}
-      enableTopToolbar={false}
-    />
-  );
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableColumnActions: false,
+  });
+
+  return <MRT_TableContainer component={Paper} table={table} />;
 };