npm - material-react-table-narender - Versions diffs - 1.0.0 - Mend

material-react-table-narender 1.0.0

Files changed (1769) hide show

package/apps/material-react-table-docs/pages/docs/api/mrt-components.mdx ADDED Viewed

@@ -0,0 +1,214 @@
+import Head from 'next/head';
+import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';
+<Head>
+  <title>{'MRT Components - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="All the internal MRT components that can be used to build your own custom table components"
+  />
+  <meta property="og:title" content="Material React Table Table Components" />
+  <meta
+    property="og:description"
+    content="All the internal MRT components that can be used to build your own custom table components"
+  />
+</Head>
+## MRT Components
+<OptionsSwitcher
+  links={[
+    {
+      label: 'MRT Components',
+      value: 'mrt-components',
+    },
+    {
+      label: 'MRT Hooks',
+      value: 'mrt-hooks',
+    },
+  ]}
+/>
+<br />
+In previous versions of `material-react-table`, you only had the option to use the `<MaterialReactTable />` component. Now in version 2, all internal MRT components are exported for you to optionally use to build up your own custom table components.
+### \<MaterialReactTable /\>
+[View Source Code on GitHub](https://github.com/KevinVandy/material-react-table/blob/v3/packages/material-react-table/src/components/MaterialReactTable.tsx)
+For most use cases, you will probably just use the default `<MaterialReactTable />` component.
+It accepts table options as props, just like in v1, but it also now simply accepts the `table` instance as its only prop instead. You have the choice to use the `useMaterialReactTable` hook to create the table instance in your own scope or not. Using the `table` prop with the `useMaterialReactTable` hook is recommended, because it will give you more flexibility as your table features get more complex.
+```jsx
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+} from 'material-react-table';
+//...
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowPinning: true,
+});
+return <MaterialReactTable table={table} />; //recommended
+```
+```jsx
+import { MaterialReactTable } from 'material-react-table';
+//...
+return <MaterialReactTable columns={columns} data={data} enableRowPinning />; //passing props instead like in v1 is possible
+```
+> Do not pass both a `table` prop and other table options as props. Additional table options passed to the `<MaterialReactTable />` component will be ignored if a `table` prop is passed. Either specify all table options in the `useMaterialReactTable` hook or pass all of them as props to the `<MaterialReactTable />` component.
+### MRT\_\* Sub Components
+Material React Table now exports all of its internal components. You can use them for your own use cases.
+#### Table Components
+[View Table Components Source Code on GitHub](https://github.com/KevinVandy/material-react-table/tree/v3/packages/material-react-table/src/components/table)
+##### \<MRT_TablePaper /\>
+The `<MRT_TablePaper />` component is the outermost component of the table. Using this is pretty much the same thing as using the `<MaterialReactTable />` component, except that you cannot pass table options as props to it.
+The Paper component includes UI for the table and the toolbar components.
+##### \<MRT_TableContainer /\>
+The `<MRT_TableContainer />` component is the container for the table. It only contains the table ui, but none of the toolbar components.
+This is a popular use case for tables that do not want the built-in toolbars, but still want all of the other table features.
+##### \<MRT_Table /\>
+The `<MRT_Table />` component contains the `<table>` element, and all of the table head, body, and footer components.
+Be aware that using this deep of a component, you will lose out on row virtualization, modal editing, and full screen features. Use the above `<MRT_TableContainer />` if you want to use those features.
+##### \<MRT_TableLoadingOverlay /\>
+Shows a loading spinner over the table above the `MRT_Table` component when the table is loading.
+#### TableHead Components
+[View TableHead Components Source Code on GitHub](https://github.com/KevinVandy/material-react-table/tree/v3/packages/material-react-table/src/components/head)
+##### \<MRT_TableHead /\>
+The `<MRT_TableHead />` component contains the `<thead>` element, and all of the table head rows.
+##### \<MRT_TableHeadRow /\>
+The `<MRT_TableHeadRow />` is a `<tr>` element that contains all of the table head cells in a row
+##### \<MRT_TableHeadCell /\>
+The `<MRT_TableHeadCell />` is a `<th>` element that contains all of the table head cell components. It contains all of the other table head cell components down below depending on which features are enabled.
+##### \<MRT_TableHeadCellColumnActionsButton /\>
+A button that opens up the column actions menu.
+##### \<MRT_TableHeadCellSortLabel /\>
+The Sort Icon Button and Label next to a table header
+##### \<MRT_TableHeadCellFilterLabel /\>
+The Filter Icon Button and Label next to a table header
+##### \<MRT_TableHeadCellGrabHandle /\>
+The Grab Handle Icon Button next to a table header used for column dragging
+##### \<MRT_TableHeadCellResizeHandle /\>
+The Resize Handle Icon Button next to a table header used for column resizing
+##### \<MRT_TableHeadCellFilterContainer /\>
+The Filter Container that contains the filter input and filter actions
+#### TableBody Components
+[View TableBody Components Source Code on GitHub](https://github.com/KevinVandy/material-react-table/tree/v3/packages/material-react-table/src/components/body)
+##### \<MRT_TableBody /\>
+The `<MRT_TableBody />` component contains the `<tbody>` element, and all of the table body rows. It has the ability to render multiple table bodies, depending on if static row pinning features are enabled and used.
+##### \<MRT_TableBodyRow /\>
+The `<MRT_TableBodyRow />` is a `<tr>` element that contains all of the table body cells in a row.
+##### \<MRT_TableDetailPanel /\>
+A row and all column-spanning row for rendering detail panels for a row.
+##### \<MRT_TableBodyCell /\>
+The `<MRT_TableBodyCell />` is a `<td>` element that surrounds the cell value or custom `Cell` render.
+##### \<MRT_TableBodyCellValue /\>
+Renders the value of a cell. This is a popular component to use as an alternative to TanStack Table's `flexRender` method. It renders everything inside of the `<td>`, but not the `<td>` itself.
+##### \<MRT_TableBodyRowGrabHandle /\>
+A button for grabbing a row for dragging.
+##### \<MRT_TableBodyRowPinButton /\>
+A button or buttons for pinning a row.
+#### TableFooter Components
+[View TableFooter Components Source Code on GitHub](https://github.com/KevinVandy/material-react-table/tree/v3/packages/material-react-table/src/components/footer)
+##### \<MRT_TableFooter /\>
+The `<MRT_TableFooter />` component contains the `<tfoot>` element, and all of the table footer rows.
+##### \<MRT_TableFooterRow /\>
+The `<MRT_TableFooterRow />` is a `<tr>` element that contains all of the table footer cells in a row.
+##### \<MRT_TableFooterCell /\>
+The `<MRT_TableFooterCell />` is a `<td>` element that surrounds the cell value or custom `Footer` render.
+#### Input Components
+[View Input Components Source Code on GitHub](https://github.com/KevinVandy/material-react-table/tree/v3/packages/material-react-table/src/components/inputs)
+##### \<MRT_EditCellTextField /\>
+The textfield component for editing a cell value that can either show in a modal or table cell.
+##### \<MRT_GlobalFilterTextField /\>
+The search textfield component for global filtering.
+##### \<MRT_FilterTextField /\>
+The textfield component for filtering a column. A somewhat comprehensive component that can be a textfield, select, multi-select, or date picker.
+##### \<MRT_FilterCheckbox /\>
+The checkbox component for filtering a column by boolean values.
+##### \<MRT_FilterRangeSlider /\>
+The range slider component for filtering a column by a range of numbers.
+##### \<MRT_FilterFilterRangeFields /\>
+A Container component that will render two MRT_FilterTextField components for filtering in a range (min and max).
+##### \<MRT_SelectCheckbox /\>
+A checkbox component for selecting a row or selecting all rows from the table header.

package/apps/material-react-table-docs/pages/docs/api/mrt-hooks.mdx ADDED Viewed

@@ -0,0 +1,153 @@
+import Head from 'next/head';
+import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';
+<Head>
+  <title>{'MRT Hooks - Material React Table V3 Docs'}</title>
+  <meta name="description" content="All the MRT hooks that can be used" />
+  <meta property="og:title" content="Material React Table Table Components" />
+  <meta
+    property="og:description"
+    content="All the internal MRT hooks that can be used"
+  />
+</Head>
+## MRT Hooks
+<OptionsSwitcher
+  links={[
+    {
+      label: 'MRT Components',
+      value: 'mrt-components',
+    },
+    {
+      label: 'MRT Hooks',
+      value: 'mrt-hooks',
+    },
+  ]}
+/>
+<br />
+MRT has been adopting more and more of a hooks based approach for its internal logic. Its API is becoming more standardized so that you can use the same hooks that the MRT components use internally to build your own custom headless table if you want to.
+### useMaterialReactTable
+[Source Code](https://github.com/KevinVandy/material-react-table/blob/v3/packages/material-react-table/src/hooks/useMaterialReactTable.ts)
+> This is probably the only MRT hook you will need to use, unless you are writing a custom headless table.
+This is the main hook from Material React Table. It creates a TanStack Table instance with all of the features that MRT provides and that you enable, and uses the proper default table options.
+```tsx
+import { useMaterialReactTable } from 'material-react-table';
+const table = useMaterialReactTable({
+  ...options,
+});
+```
+This hook is the combination of 2 other internal MRT hooks: [`useMRT_TableOptions`](#usemrt_tableoptions), and [`useMRT_TableInstance`](#usemrt_tableinstance).
+### useMRT_TableOptions
+[Source Code](https://github.com/KevinVandy/material-react-table/blob/v3/packages/material-react-table/src/hooks/useMRT_TableOptions.ts)
+This hook simply takes in your custom table options and merges them with the default table options. It also does some extra logic to make sure that some default table options are set correctly based on other enabled features. For example, if you enable row virtualization features, the sticky header will also be enabled by default, and the layoutMode will adjust accordingly.
+```tsx
+import { useMRT_TableOptions } from 'material-react-table';
+const transformedTableOptions = useMRT_TableOptions({
+  ...options,
+});
+```
+### useMRT_TableInstance
+[Source Code](https://github.com/KevinVandy/material-react-table/blob/v3/packages/material-react-table/src/hooks/useMRT_TableInstance.ts)
+This is where most of the magic happens. This hook is responsible for creating the TanStack Table instance, and adding all of the MRT features to it. It needs table options to be passed in to it correctly, with good defaults, and it will return the table instance.
+```tsx
+import { useMRT_TableInstance } from 'material-react-table';
+const table = useMRT_TableInstance({
+  ...transformedTableOptions, //usually from useMRT_TableOptions
+});
+```
+This hook also uses the [`useMRT_Effects`](#usemrt_effects)
+### useMRT_Effects
+[Source Code](https://github.com/KevinVandy/material-react-table/blob/v3/packages/material-react-table/src/hooks/useMRT_Effects.ts)
+This hook is responsible for adding some extra useEffect hooks to the table instance. These hooks are needed by some MRT features on a table wide level.
+### useMRT_Rows
+> New in v2.2.0
+[Source Code](https://github.com/KevinVandy/material-react-table/blob/v3/packages/material-react-table/src/hooks/useMRT_Rows.ts)
+This hook is mostly a wrapper around `table.getRowModel`, but with a bit more custom logic for fuzzy ranking, row pinning, and more. It consumes a `table` instance and returns the rows that should be rendered in the main table body. This can be a useful hook if you are writing a custom headless table, but still want all of the extra MRT enhanced behavior for fuzzy ranking, row pinning, etc. Alternatively, you can just use `table.getRowModel()` for a more vanilla TanStack Table experience.
+```tsx
+import { useMaterialReactTable, useMRT_Rows } from 'material-react-table';
+const table = useMaterialReactTable({
+  ...options,
+});
+const rows = useMRT_Rows(table);
+return rows.map((row) => {
+  //render row
+});
+```
+### useMRT_ColumnVirtualizer
+> New in v2.2.0
+[Source Code](https://github.com/KevinVandy/material-react-table/blob/v3/packages/material-react-table/src/hooks/useMRT_ColumnVirtualizer.ts)
+This hook is a wrapper around the `useVirtualizer` hook from TanStack Virtual. It consumes a `table` instance and returns a Column Virtualizer instance that is optimized for MRT table columns, with considerations for other MRT features like column pinning, column resizing, column hiding, and more.
+```tsx
+import {
+  useMaterialReactTable,
+  useMRT_ColumnVirtualizer,
+} from 'material-react-table';
+const table = useMaterialReactTable({
+  ...options,
+});
+const columnVirtualizer = useMRT_ColumnVirtualizer(table);
+```
+You would only need to use this hook if you are writing a custom headless table and want the same default column virtualization behavior that MRT provides. If you are using the MRT components, this hook is already used internally by the `MRT_Table` component.
+### useMRT_RowVirtualizer
+> New in v2.2.0
+[Source Code](https://github.com/KevinVandy/material-react-table/blob/v3/packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts)
+This hook is a wrapper around the `useVirtualizer` hook from TanStack Virtual. It consumes a `table` instance and returns a Row Virtualizer instance that is optimized for MRT table rows, with considerations for other MRT features like row pinning, row dragging, and more.
+```tsx
+import {
+  useMaterialReactTable,
+  useMRT_RowVirtualizer,
+} from 'material-react-table';
+const table = useMaterialReactTable({
+  ...options,
+});
+const rowVirtualizer = useMRT_RowVirtualizer(table);
+```
+You would only need to use this hook if you are writing a custom headless table and want the same default row virtualization behavior that MRT provides. If you are using the MRT components, this hook is already used internally by the `MRT_Table` component.

package/apps/material-react-table-docs/pages/docs/api/row-instance-apis.mdx ADDED Viewed

@@ -0,0 +1,89 @@
+import Head from 'next/head';
+import RowInstanceAPIsTable from '../../../components/prop-tables/RowInstanceAPIsTable';
+import SourceCode from '../../../components/prop-tables/RowInstanceAPIsSource';
+import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';
+<Head>
+  <title>{'Row Instance APIs - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="All the row instance methods and objects that can be accessed from the table instance in Material React Table"
+  />
+  <meta
+    property="og:title"
+    content="Material React Table Row Instance API Reference"
+  />
+  <meta
+    property="og:description"
+    content="A reference of all the row instance api methods and objects that can be used in Material React Table"
+  />
+</Head>
+## Row 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 [props](/docs/api/props) or [column options](/docs/api/column-options) for Material React Table. These are just static methods on a row instance that you can use.
+Every row in the table has an associated row instance that can be accessed in many of the callback props that you can use to access a row's information and methods.
+You can access and use a `row` object in quite a few places, but here are some of the most common:
+```jsx
+const columns = [
+  {
+    accessorKey: 'salary',
+    header: 'Salary',
+    //you can access a row instance in column definition option callbacks like this
+    muiEditTextFieldProps: ({ row }) => ({
+      disabled: row.original.employmentStatus === 'Retired',
+    }),
+    //or in the component override callbacks like this
+    Cell: ({ cell, row }) => (
+      <div>
+        {row.original.employmentStatus === 'Retired'
+          ? 'Retired'
+          : cell.getValue()}
+      </div>
+    ),
+  },
+];
+const table = useMaterialReactTable({
+  columns,
+  data,
+  //or a row instance in callback props like this
+  muiSelectCheckboxProps: ({ row }) => ({
+    disabled: row.original.isAccountActive === false,
+  }),
+  renderDetailPanel: ({ row }) => (
+    <div>
+      <span>First Name: {row.original.firstName}</span>
+      <span>Last Name: {row.original.lastName}</span>
+    </div>
+  ),
+});
+```
+<RowInstanceAPIsTable />
+<SourceCode />

package/apps/material-react-table-docs/pages/docs/api/state-options.mdx ADDED Viewed

@@ -0,0 +1,61 @@
+import Head from 'next/head';
+import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';
+import SourceCode from '../../../components/prop-tables/StateOptionsSource';
+import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';
+<Head>
+  <title>{'State Options - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="All the state options that can be used in Material React Table"
+  />
+  <meta
+    property="og:title"
+    content="Material React Table State Options API Reference"
+  />
+  <meta
+    property="og:description"
+    content="A reference of all the state options that can be used in Material React Table"
+  />
+</Head>
+## State Options
+<OptionsSwitcher
+  links={[
+    {
+      label: 'Table Options',
+      value: 'table-options',
+    },
+    {
+      label: 'Column Options',
+      value: 'column-options',
+    },
+    {
+      label: 'State Options',
+      value: 'state-options',
+    },
+  ]}
+/>
+> Many of the state options you can pass here are the same as the ones you can pass to the [useReactTable](https://tanstack.com/table/v8/docs/api/core/table) useTableInstance hook.
+Here is a list of all the state options you can pass to `initialState` or `state`.
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  //note: each individual state must be mutually exclusive to `initial state` or `state`
+  initialState: {
+    // all the state options you can pass here
+  },
+  state: {
+    // or here
+  },
+});
+```
+<StateOptionsTable />
+<SourceCode />

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

@@ -0,0 +1,73 @@
+import Head from 'next/head';
+import TableInstanceAPIsTable from '../../../components/prop-tables/TableInstanceAPIsTable';
+import SourceCode from '../../../components/prop-tables/TableInstanceAPIsSource';
+import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';
+<Head>
+  <title>{'Table Instance APIs - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="All the table instance methods and objects that can be accessed from the table instance in Material React Table"
+  />
+  <meta
+    property="og:title"
+    content="Material React Table Table Instance API Reference"
+  />
+  <meta
+    property="og:description"
+    content="A reference of all the table instance api methods and objects that can be used in Material React Table"
+  />
+</Head>
+## Table 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 the [table options](/docs/api/table-options) for Material React Table. These are just static methods on a table instance that you can use.
+These are the methods available on the `table` instance that is returned from the `useMaterialReactTable` hook. You can use these methods to interact with the table instance.
+```jsx
+const columns = useMemo(() => [
+  {
+    accessor: 'name',
+    header: 'Name',
+    Cell: ({ cell, table }) => <span onClick={() => table.{/* or maybe here */}}></span>,
+  },
+], []);
+const table = useMaterialReactTable({
+  columns,
+  data,
+  renderTopToolbarCustomActions: ({ table }) => <Button onClick={() => table{/* or maybe here */}}>Click Me</Button>,
+});
+const someEventHandler = () => {
+  table. //call any of the table instance methods here
+};
+return <MaterialReactTable table={table} />;
+```
+<TableInstanceAPIsTable />
+<SourceCode />

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

@@ -0,0 +1,62 @@
+import Head from 'next/head';
+import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
+import SourceCode from '../../../components/prop-tables/TableOptionsSource';
+import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';
+<Head>
+  <title>{'Table Options - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="All the table options that can be used in the useMaterialReactTable hook"
+  />
+  <meta
+    property="og:title"
+    content="Material React Table Table Options API Reference"
+  />
+  <meta
+    property="og:description"
+    content="A reference of all the table options that can be used in Material React Table"
+  />
+</Head>
+## Table Options (Props)
+<OptionsSwitcher
+  links={[
+    {
+      label: 'Table Options',
+      value: 'table-options',
+    },
+    {
+      label: 'Column Options',
+      value: 'column-options',
+    },
+    {
+      label: 'State Options',
+      value: 'state-options',
+    },
+  ]}
+/>
+> Many of the options you can pass to `useMaterialReactTable` are the same as the ones you can pass to the TanStack Table [useReactTable](https://tanstack.com/table/v8/docs/api/core/table) hook.
+Here is a list of all the table options that you can pass to the `useMaterialReactTable` hook.
+```jsx
+const table = useMaterialReactTable({
+  // all the options that you can pass here (recommended)
+});
+//or all of the props that could be passed to `<MaterialReactTable />` IF not using `useMaterialReactTable` hook
+return (
+  <MaterialReactTable
+  // all of the props that could be passed here if no `table` prop is passed
+  />
+);
+return <MaterialReactTable table={table} />; //recommended
+```
+<TableOptionsTable />
+<SourceCode />

package/apps/material-react-table-docs/pages/docs/examples/advanced.mdx ADDED Viewed

@@ -0,0 +1,25 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/BasicExamples';
+<Head>
+  <title>{'Advanced Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="Advanced Material React Table Example with pagination, filtering, sorting, selection, detail panels, column ordering, pinning, custom toolbars, and more"
+  />
+  <meta property="og:title" content="Advanced Material React Table Example" />
+  <meta
+    property="og:description"
+    content="Learn how to take advantage of advanced MRT features, suc as pagination, filtering, sorting, selection, detail panels, column ordering, pinning, custom toolbars, and more"
+  />
+</Head>
+## Advanced Example
+Here is a more advanced example showcasing Material React Table's many features. Features such as row selection, expanding detail panels, header groups, column ordering, column pinning, column grouping, custom column and cell renders, etc., can be seen here.
+This example is still only using client-side features. If you want to see an example of how to use Material React Table with server side logic and remote data, check out either the [Remote&nbsp;Data&nbsp;Example](/docs/examples/remote) or the [React-Query Example](/docs/examples/react-query).
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/prop-playground--maximum-features)**