material-react-table-narender 1.0.0

package/apps/material-react-table-docs/pages/api/treedata.ts

@@ -0,0 +1,178 @@
+import {
+  type MRT_ColumnFiltersState,
+  type MRT_SortingState,
+} from 'material-react-table';
+import { type NextApiRequest, type NextApiResponse } from 'next';
+
+//This is all fake mock code. Don't be inspired by it.
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (process.env.NODE_ENV === 'development') {
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }
+
+  const { start, size, filters, sorting, globalFilter, expandedRowIds } =
+    req.query as Record<string, string>;
+
+  let dbData = getData();
+
+  //recursive filter out rows that don't have a manageId that matches an expandedRowId
+  const removeSubordinatesFromCollapsedRows = (rows: DataRow[]) => {
+    rows.forEach((row) => {
+      if (!expandedRowIds.includes(row.id)) {
+        delete row.subordinates;
+      }
+      if (row.subordinates?.length) {
+        removeSubordinatesFromCollapsedRows(row.subordinates);
+      }
+    });
+  };
+
+  if (expandedRowIds !== 'all') {
+    removeSubordinatesFromCollapsedRows(dbData);
+  }
+
+  const parsedSorting = JSON.parse(sorting) as MRT_SortingState;
+  if (parsedSorting?.length) {
+    const sort = parsedSorting[0];
+    const { id, desc } = sort;
+
+    //recursive sort rows and row's sub-rows
+    const sortRowsAndSubRows = (rows) => {
+      rows.sort((a, b) => {
+        if (!a[id] || !b[id]) return 0;
+        if (desc) {
+          return a[id] < b[id] ? 1 : -1;
+        }
+        return a[id] > b[id] ? 1 : -1;
+      });
+      rows.forEach((row) => {
+        if (row.subordinates?.length) {
+          sortRowsAndSubRows(row.subordinates);
+        }
+      });
+      return rows;
+    };
+
+    dbData = sortRowsAndSubRows(dbData);
+  }
+
+  const paginatedData =
+    dbData.slice(parseInt(start), parseInt(start) + parseInt(size)) ?? [];
+
+  let flatDBData: DataRow[] = [];
+  const flattenRows = (rows) => {
+    rows.forEach((row) => {
+      flatDBData.push(row);
+      if (row.subordinates?.length) {
+        flattenRows(row.subordinates);
+      }
+    });
+    return flatDBData;
+  };
+
+  flatDBData = flattenRows(paginatedData);
+
+  flatDBData.forEach((row) => (delete row.subordinates ? row : null));
+
+  res.status(200).json({
+    data: flatDBData,
+    meta: { totalRowCount: flatDBData.length },
+  });
+}
+
+interface DataRow {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  state: string;
+  managerId: string | null;
+  subordinateIds: string[];
+  subordinates?: DataRow[];
+}
+
+//data definitions...
+const getData = (): DataRow[] => [
+  {
+    id: '5ymtrc',
+    firstName: 'Henry',
+    lastName: 'Lynch',
+    email: 'Camden.Macejkovic@yahoo.com',
+    state: 'California',
+    managerId: null,
+    subordinateIds: ['08m6rx'],
+    subordinates: [
+      {
+        id: '08m6rx',
+        firstName: 'Molly',
+        lastName: 'Purdy',
+        email: 'Hugh.Dach79@hotmail.com',
+        state: 'Rhode Island',
+        managerId: '5ymtrc',
+        subordinateIds: ['9s41rp', 'ek5b97', 'xxtydd'],
+        subordinates: [
+          {
+            id: '9s41rp',
+            firstName: 'Kelvin',
+            lastName: 'Langosh',
+            email: 'Jerod14@hotmail.com',
+            state: 'Ohio',
+            managerId: '08m6rx',
+            subordinateIds: [],
+          },
+          {
+            id: 'ek5b97',
+            firstName: 'Glenda',
+            lastName: 'Douglas',
+            email: 'Eric0@yahoo.com',
+            state: 'Montana',
+            managerId: '08m6rx',
+            subordinateIds: [],
+          },
+          {
+            id: 'xxtydd',
+            firstName: 'Leone',
+            lastName: 'Williamson',
+            email: 'Ericka_Mueller52@yahoo.com',
+            state: 'Colorado',
+            managerId: '08m6rx',
+            subordinateIds: [],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'wzxj9m',
+    firstName: 'Mckenna',
+    lastName: 'Friesen',
+    email: 'Veda_Feeney@yahoo.com',
+    state: 'New York',
+    managerId: null,
+    subordinateIds: ['21dwtz', 'o8oe4k'],
+    subordinates: [
+      {
+        id: '21dwtz',
+        firstName: 'Wyman',
+        lastName: 'Jast',
+        email: 'Melvin.Pacocha@yahoo.com',
+        state: 'Montana',
+        managerId: 'wzxj9m',
+        subordinateIds: [],
+      },
+      {
+        id: 'o8oe4k',
+        firstName: 'Janick',
+        lastName: 'Willms',
+        email: 'Delfina12@gmail.com',
+        state: 'Nebraska',
+        managerId: 'wzxj9m',
+        subordinateIds: [],
+      },
+    ],
+  },
+];
+//end

package/apps/material-react-table-docs/pages/blog/index.mdx

@@ -0,0 +1,14 @@
+import Head from 'next/head';
+import TableOfContentsList from '../../components/navigation/TableOfContentsList';
+import { routes } from '../../components/navigation/routes';
+
+<Head>
+  <title>Material React Table Blog</title>
+  <meta name="description" content="Material React Table Blog Posts" />
+</Head>
+
+## Blog
+
+<TableOfContentsList
+  items={routes.find((item) => item.href === '/blog').items}
+/>

package/apps/material-react-table-docs/pages/blog/the-best-react-data-grid-table-libraries-with-material-design-in-2023.mdx

@@ -0,0 +1,152 @@
+import Head from 'next/head';
+import Image from 'next/image';
+import { BlogAuthor } from '../../components/mdx/BlogAuthor';
+import { EthicalAd } from '../../components/mdx/EthicalAd';
+
+<Head>
+  <title>
+    {
+      'The Best React Data Grid/Table Libraries with Material Design in 2023 - MRT Blog'
+    }
+  </title>
+  <meta
+    name="description"
+    content="Here are the top 3 data grid/table libraries that I recommend for Material UI in 2023. They are all well maintained, well documented, and are actively developed."
+  />
+  <script
+    type="application/ld+json"
+    dangerouslySetInnerHTML={{
+      __html: JSON.stringify({
+        '@context': 'https://schema.org',
+        '@type': 'BlogPosting',
+        headline:
+          'The Best React Data Grid/Table Libraries with Material Design in 2023.',
+        keywords: [
+          'React',
+          'Material Design',
+          'Material UI',
+          'Datagrid',
+          'NPM',
+        ],
+        wordCount: 1430,
+        datePublished: '2023-01-01',
+        dateModified: '2023-01-01',
+        author: [
+          {
+            '@type': 'Person',
+            name: 'Kevin Van Cott',
+            url: 'https://www.kevinvancott.dev/',
+          },
+        ],
+      }),
+    }}
+  />
+</Head>
+
+## The Best React Data Grid/Table Libraries with Material Design in 2023
+
+<BlogAuthor publishDate="2023/01/01" />
+
+_This blog post also appears on [Medium](https://medium.com/@kevinvancott/the-best-react-data-grid-table-libraries-with-material-design-in-2023-690508de8b61)._
+
+If you are using a component library like [Material UI](https://mui.com/) in your project, you probably need to rapidly build out your UI without having to worry so much about the intricate styling details. You need to build features quickly, but you also need to deliver software that is of high quality and is easy to use. Material UI has tons of components that let you build out your UI quickly, but when it comes to tables or heavily featured data grid components, they may still feel rather low-level and primitive.
+
+Yes, you can build your own high-quality and fully featured data grids yourself with only the stock Material UI Table components, but there are also quite a few dedicated third party data grid and table libraries out there that can help you build out your tables and grids even faster. Let's take a look at some of the best data grid/table libraries that work best with Material UI in 2023 and beyond.
+
+### Recommended Material UI Data Grid/Table Libraries in 2023
+
+Here are the top three data grid/table libraries that I recommend for Material UI in 2023. They are all well maintained, well documented, and have active communities that you can get help from if you run into any issues.
+
+#### 1. MUI X DataGrid (MIT or Pro/Premium)
+
+<Image
+  alt="MUI X Example"
+  height={800}
+  layout="responsive"
+  src="/blog-imgs/best-table-libs/mui-x-example.png"
+  style={{ borderRadius: '8px', margin: '2rem auto', maxWidth: '850px' }}
+  width={800}
+/>
+
+The [MUI X DataGrid](https://mui.com/x/react-data-grid/) package comes directly from MUI, so you are guaranteed to at least get a solid feature-rich table that integrates perfectly with the rest of your Material UI components. It is very well maintained, and you can get pretty good support from the MUI team if you run into any issues.
+
+It has just about every table feature you might need, but one caveat is that some of the features are only available in either the paid Pro or Premium versions. There is a free MIT version, of course, but be aware of the vendor lock-in you might get yourself into if you choose to use this library. If you are building a commercial product, paying for a library like this might be worth it, but take a look at the other options first to see if they will work for you.
+
+<EthicalAd id="blog" />
+
+#### 2. AG Grid (MIT or Enterprise)
+
+<Image
+  alt="AG Grid Example"
+  height={800}
+  layout="responsive"
+  src="/blog-imgs/best-table-libs/ag-grid-example.png"
+  style={{ borderRadius: '8px', margin: '2rem auto', maxWidth: '1000px' }}
+  width={800}
+/>
+
+[AG Grid](https://www.ag-grid.com/) is potentially the greatest data grid library out there. It has just about every feature you might need and then some!
+
+Seriously, AG Grid is not just a data grid. It is built to potentially be a full-blown Excel spreadsheet replacement if you enable all of its features.
+
+The "AG" in AG Grid stands for "Agnostic Grid," which means that the library works in multiple JavaScript Frameworks besides React. On the same note, though, AG Grid does not use Material UI under the hood like all of the other libraries on this list. However, it does stick very close to Material Design, so it will not stick out too far from the rest of the components in your Material UI project.
+
+AG Grid is also in a similar situation as MUI X DataGrid, where some of the features are only available in the paid Enterprise version. However, the free version is still very feature-rich and will take you very far in most projects. AG Grid is one of the few high-quality OSS projects out there where it is probably worth every penny to pay for the Enterprise version if you really need it.
+
+Be aware, however, that AG Grid is a fairly large library that also comes with a large bundle size. It is definitely not the most lightweight option out there. It really is designed for use cases where you need all the powerful features that it has to offer.
+
+<EthicalAd id="blog" />
+
+#### 3. Material React Table (Free MIT)
+
+> Note: I am the author of Material React Table.
+
+<Image
+  alt="MRT Example"
+  height={800}
+  layout="responsive"
+  src="/blog-imgs/best-table-libs/mrt-example.png"
+  style={{ borderRadius: '8px', margin: '2rem auto', maxWidth: '1000px' }}
+  width={800}
+/>
+
+The final library on this list is [Material React Table](https://www.material-react-table.com/). This is a relatively new library that was first released in September 2022. Unlike the two previously mentioned libraries, Material React Table is 100% free to use with the MIT license. It is also built directly on top of Material UI V6 and exclusively uses Material UI components under the hood, so it will fit right in with the rest of your Material UI project. Almost all of the Material UI components that are used internally have their props exposed for you to customize and style, so you should not run into many problems where you cannot customize something that you need to.
+
+The main advantage of this project is that it is also built on top of [TanStack Table v8](https://tanstack.com/table/v8) (formerly known as React Table) and [TanStack Virtual v3](https://tanstack.com/virtual/v3) (formerly known as React Virtual), which are powerful headless UI libraries for efficiently rendering react table components with virtualization. This also means the the APIs to customize the behavior of the table are standardized with TanStack Table's comprehensive API. Compared to other data grid/table libraries, Material React Table is very customizable and flexible.
+
+Despite being free to use, Material React Table still offers almost every data grid/table feature you might need. A lot of the features are implemented in a very lightweight way. The bundle size of Material React Table is only around 42 KB, which is much smaller than the other libraries listed here, which range from about 100-300 KB.
+
+<EthicalAd id="blog" />
+
+### Honorable Mentions That You Probably Should Not Use Anymore
+
+There are a couple of other Material UI data grid/table libraries out there that used to be popular but are now no longer being maintained. They were great during their time, but you should probably not start new projects with these libraries in 2023.
+
+#### Do Not Use Material Table
+
+[Material-Table](https://material-table.com/) is a library that I used to use a lot. It was awesome. Unfortunately, the maintainer does not seem to be active on GitHub anymore, and the project is no longer being actively maintained. It went a couple of years without getting any updates, and you will receive some glaring NPM audit security warnings if you install this in your project.
+
+However, there is now a community fork called [@material-table/core](https://material-table-core.com/) that is still alive. It is a fork of the original project with some versions that are compatible with Material UI V6. It is awesome that this exists as this gives an option to developers who just need to upgrade their existing projects to Material UI V6, but I still would not recommend starting new projects with this as there are now better options out there.
+
+#### Do Not Use MUI Datatables
+
+[MUI-Datatables](https://github.com/gregnb/mui-datatables) is a library that is good overall, visually well designed, and even still maintained enough to stay up to date with Material UI V6. However, it lacks good documentation and can be hard to figure out how to use. It no longer has a documentation site, so the API section in the README is the only documentation that you get. It is also worth noting that at the time of writing, there are almost 600 open and unresolved issues in the GitHub repo, and none of the issues seem to get any attention from the maintainers. Overall, I would not recommend starting new projects with this library in 2023.
+
+### What if These Libraries Are Not Customizable Enough?
+
+The libraries listed above are all great options for building out data tables with many of the features you need very quickly, but it is possible that, down the road, you might encounter situations where these libraries are not customizable enough for your needs. If this happens, you will probably need to build your own data grid/table components from scratch. This is not as hard as it sounds, especially with libraries like TanStack Table.
+
+<Image
+  alt="TanStack Home Page"
+  height={800}
+  layout="responsive"
+  src="/blog-imgs/best-table-libs/tanstack.png"
+  style={{ borderRadius: '8px', margin: '2rem auto', maxWidth: '1000px' }}
+  width={800}
+/>
+
+Using a combination of [TanStack Table](https://tanstack.com/table/v8) and the [Material UI Table components](https://mui.com/material-ui/react-table/) can take you a long way. TanStack Table's hooks can take care of all the sorting, filtering, pagination, and grouping logic for you so that you can focus on customizing the UI to your needs. This is a similar approach to what the Material React Table library already does, but it can be great to be in control of your own code as much as possible when you have very specific requirements.
+
+### Conclusion
+
+In 2023, the Material UI ecosystem is more mature than ever. You have a lot of options when it comes to building data grids and tables. I suggest seeing if Material React Table works for you, but if not, take a look at whether or not AG Grid's powerful features fit your use case, or if you need to build a custom table with TanStack Table.

package/apps/material-react-table-docs/pages/changelog.mdx

@@ -0,0 +1,66 @@
+import Head from 'next/head';
+
+<Head>
+  <title>{'MRT V3 Changelog - Material React Table V3 Docs'}</title>
+  <meta name="description" content="Material React Table V3 Changelog" />
+</Head>
+
+## MRT V3 Changelog
+
+### Version 3.0.3 - 2024-12-13
+
+- Fixed filter text field value
+
+### Version 3.0.2 - 2024-12-08
+
+- Fixed rendering of multi-select filter when filter value is an empty array
+- Rearranged execution of `muiTableBodyCellProps?.onKeyDown` internally to allow these events to be overridden or even skipped
+- Fixed MRT_RowActionMenu key prop internally
+- Corrected Sweedish `sv` locale translations
+- Removed 'new-password' from autocomplete in text fields and just use 'off'
+
+### Version 3.0.1 - 2024-09-05
+
+- Removed fullscreen MUI FocusTrap wrapper for now since vitest had issues with it
+
+### Version 3.0.0 - 2024-09-05
+
+- `@mui/material` and `@mui/icons-material` v6.0.0 are now minimum required versions of Material UI packages (you might be able to get away with lower MUI versions for a while, but eventually MUI V6 APIs will be used internally by MRT and your project will break)
+- `@mui/x-date-pickers` v7.15.0 is now a minimum required dependency
+- `react` and `react-dom` v18.0.0 are now a minimum required dependencies (some React 18 APIs are now used internally by MRT)
+- Keyboard navigation for table cells in now enabled by default. If you had added your own custom keyboard shortcuts, you may want to set `enableKeyboardShortcuts` to `false` or remove your custom shortcuts.
+- Removed deprecated `MRT_Virtualizer` type in favor of separate `MRT_RowVirtualizer` and `MRT_ColumnVirtualizer` types
+- Removed deprecated `text` in favor of the more consistent `label` type in dropdown/autocomplete/select option types.
+- Deprecated several `mui*Props` table options that were column-specific. These table options should either be specified in column defs or in the `defaultColumn` table option.
+  - `muiColumnActionsButtonProps`
+  - `muiColumnDragHandleProps`
+  - `muiCopyButtonProps`
+  - `muiEditTextFieldProps`
+  - `muiFilterAutocompleteProps`
+  - `muiFilterCheckboxProps`
+  - `muiFilterDatePickerProps`
+  - `muiFilterDateTimePickerProps`
+  - `muiFilterSliderProps`
+  - `muiFilterTextFieldProps`
+  - `muiFilterTimePickerProps`
+  - `muiTableBodyCellProps`
+  - `muiTableHeadCellProps`
+  - `muiTableFooterCellProps`
+  - `renderCellActionMenuItems`
+  - `renderColumnActionsMenuItems`
+  - `renderColumnFilterModeMenuItems`
+- Fixed top pagination and searchbox sometimes overlapping
+
+See the entire [v3 migration guide](/docs/getting-started/migrating-to-v3) for more details.
+
+Is anything missing from this V3 changelog? Make a PR or join the [Discord](https://discord.gg/5wqyRx6fnm) to discuss.
+
+## Old MRT Version 2 Changelog
+
+See the old [V2 Changelog](https://v2.material-react-table.com/changelog)
+
+## Old MRT Version 1 Changelog
+
+See the old [V1 Changelog](https://v1.material-react-table.com/changelog)
+
+> Curious about future releases? Check out the [Roadmap](/roadmap)

package/apps/material-react-table-docs/pages/docs/api/cell-instance-apis.mdx

@@ -0,0 +1,83 @@
+import Head from 'next/head';
+import CellInstanceAPIsTable from '../../../components/prop-tables/CellInstanceAPIsTable';
+import SourceCode from '../../../components/prop-tables/CellInstanceAPIsSource';
+import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';
+
+<Head>
+  <title>{'Cell Instance APIs - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="All the cell instance methods and objects that can be accessed from a cell in Material React Table"
+  />
+  <meta
+    property="og:title"
+    content="Material React Table Cell Instance API Reference"
+  />
+  <meta
+    property="og:description"
+    content="A reference of all the cell instance api methods and objects that can be used in Material React Table"
+  />
+</Head>
+
+## Cell Instance APIs
+
+<OptionsSwitcher
+  links={[
+    {
+      label: 'Table Instance APIs',
+      value: 'table-instance-apis',
+    },
+    {
+      label: 'Column Instance APIs',
+      value: 'column-instance-apis',
+    },
+    {
+      label: 'Row Instance APIs',
+      value: 'row-instance-apis',
+    },
+    {
+      label: 'Cell Instance APIs',
+      value: 'cell-instance-apis',
+    },
+  ]}
+/>
+
+<br />
+
+Every cell provides a `cell` object that can be used in many props or column definitions that let's you have access to a cell's information and methods.
+
+You can access and use a `cell` object in quite a few places, but here are some of the most common:
+
+```jsx
+const columns = [
+  {
+    accessorKey: 'username',
+    header: 'Username',
+    //you can access a cell in many callback column definition options like this
+    muiTableBodyCellProps: ({ cell }) => ({
+      onClick: () => {
+        console.log(cell.getValue(), cell.id);
+      },
+    }),
+    //or in the component override callbacks like this
+    Cell: ({ cell }) => {
+      return <div>{cell.getValue()}</div>;
+    },
+  },
+];
+
+const table = useMaterialReactTable({
+  columns,
+  data,
+  //or in callback props like this
+  muiEditTextFieldProps: ({ cell }) => ({
+    disabled: cell.getValue() === 'admin',
+  }),
+});
+```
+
+> NOTE: These are NOT [props](/docs/api/props) or [column options](/docs/api/column-options) for Material React Table. These are just static methods on a cell instance that you can use.
+
+<CellInstanceAPIsTable />
+
+<SourceCode />

package/apps/material-react-table-docs/pages/docs/api/column-instance-apis.mdx

@@ -0,0 +1,90 @@
+import Head from 'next/head';
+import ColumnInstanceAPIsTable from '../../../components/prop-tables/ColumnInstanceAPIsTable';
+import SourceCode from '../../../components/prop-tables/ColumnInstanceAPIsSource';
+import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';
+
+<Head>
+  <title>{'Column Instance APIs - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="All the column instance methods and objects that can be accessed from a column instance in Material React Table"
+  />
+  <meta
+    property="og:title"
+    content="Material React Table Column Instance API Reference"
+  />
+  <meta
+    property="og:description"
+    content="A reference of all the column instance api methods and objects that can be used in Material React Table"
+  />
+</Head>
+
+## Column Instance APIs
+
+<OptionsSwitcher
+  links={[
+    {
+      label: 'Table Instance APIs',
+      value: 'table-instance-apis',
+    },
+    {
+      label: 'Column Instance APIs',
+      value: 'column-instance-apis',
+    },
+    {
+      label: 'Row Instance APIs',
+      value: 'row-instance-apis',
+    },
+    {
+      label: 'Cell Instance APIs',
+      value: 'cell-instance-apis',
+    },
+  ]}
+/>
+
+> NOTE: These are NOT [column options](/docs/api/column-options) for Material React Table. These are just static methods on a column instance that you can use.
+
+Each column has a `column` instance object associated with it that can be accessed in callback props and other places in the table.
+
+You can access and use a `column` instance in quite a few places, but here are some of the most common:
+
+```jsx
+const columns = [
+  {
+    accessorKey: 'username',
+    header: 'Username',
+    //you can access a column instance in many callback functions in a column definition like this
+    muiTableHeadCellProps: ({ column }) => ({
+      sx: {
+        color: column.getIsSorted() ? 'red' : 'black',
+      },
+    }),
+    //or in the component override callbacks
+    Header: ({ column }) => <div>{column.columnDef.header}</div>,
+    Cell: ({ cell, column }) => (
+      <Box
+        sx={{
+          backgroundColor: column.getIsGrouped() ? 'green' : 'white',
+        }}
+      >
+        {cell.getValue()}
+      </Box>
+    ),
+  },
+];
+
+const table = useMaterialReactTable({
+  columns,
+  data,
+  //or in callback props like this
+  muiTableBodyCellProps: ({ column }) => ({
+    sx: {
+      boxShadow: column.getIsPinned() ? '0 0 0 2px red' : 'none',
+    },
+  }),
+});
+```
+
+<ColumnInstanceAPIsTable />
+
+<SourceCode />

package/apps/material-react-table-docs/pages/docs/api/column-options.mdx

@@ -0,0 +1,64 @@
+import Head from 'next/head';
+import ColumnOptionsTable from '../../../components/prop-tables/ColumnOptionsTable';
+import SourceCode from '../../../components/prop-tables/ColumnOptionsSource';
+import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';
+
+<Head>
+  <title>{'Column Options - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="All the column options that can be used in Material React Table"
+  />
+  <meta
+    property="og:title"
+    content="Material React Table Column Options API Reference"
+  />
+  <meta
+    property="og:description"
+    content="A reference of all the column options that can be used in Material React Table"
+  />
+</Head>
+
+## Column Options
+
+<OptionsSwitcher
+  links={[
+    {
+      label: 'Table Options',
+      value: 'table-options',
+    },
+    {
+      label: 'Column Options',
+      value: 'column-options',
+    },
+    {
+      label: 'State Options',
+      value: 'state-options',
+    },
+  ]}
+/>
+
+> Many of the column options you can pass here are the same as the ones that you can pass to the [useReactTable](https://tanstack.com/table/v8/docs/api/core/column-def) ColumnDefs
+
+Here is a list of all the column options you can specify in a `column` definition.
+
+```jsx
+const columns = useMemo(
+  () => [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      // All of the options you can specify here
+    },
+  ],
+  [],
+);
+
+const table = useMaterialReactTable({ columns, data });
+
+return <MaterialReactTable table={table} />;
+```
+
+<ColumnOptionsTable />
+
+<SourceCode />

package/apps/material-react-table-docs/pages/docs/api/index.mdx

@@ -0,0 +1,14 @@
+import Head from 'next/head';
+import TableOfContentsList from '../../../components/navigation/TableOfContentsList';
+import { routes } from '../../../components/navigation/routes';
+
+<Head>
+  <title>{'API Reference - Material React Table V3 Docs'}</title>
+</Head>
+
+## API Reference
+
+<TableOfContentsList
+  items={routes.find((item) => item.href === '/docs/api').items}
+  variant="heading"
+/>