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

material-react-table-narender 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1769) hide show

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

@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/FilteringExamples';
+<Head>
+  <title>{'Filter Switching Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of Material React Table which shows how to let the user switch between multiple filtering modes."
+  />
+  <meta
+    property="og:title"
+    content="Filter Switching Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="An example of Material React Table which shows how to let the user switch between multiple filtering modes."
+  />
+</Head>
+## Filter Switching Example
+Material React Table supports letting users switch between multiple filter modes. Learn more in the full [Column Filtering Feature Guide](/docs/guides/column-filtering).
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/prop-playground--default)**

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

@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/FilteringExamples';
+<Head>
+  <title>{'Filter Variants Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of Material React Table which shows all of the powerful built-in filter variants."
+  />
+  <meta
+    property="og:title"
+    content="Filter Variants Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="An example of Material React Table which shows all of the powerful built-in filter variants."
+  />
+</Head>
+## Filter Variants Example
+Material React Table not only has filtering built in, but it also has a lot of different filter variants that take care of a lot of the heavy lifting for you. Text filters, date filters, range filters, range slider filters, and more are all built in and ready to use. There is much more you can do to customize the behavior of filtering, so be sure to check out the full [Column Filtering Feature Guide](/docs/guides/column-filtering) for more information.
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/prop-playground--default)**

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

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

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

@@ -0,0 +1,30 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/VirtualizedExamples';
+<Head>
+  <title>{'Infinite Scrolling Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of Material React Table which shows how to implement an infinite scrolling table that fetches data from a remote server as the user scrolls down the table with the useInfiniteQuery hook from react-query"
+  />
+  <meta
+    property="og:title"
+    content="Infinite Scrolling Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="Learn how to stream rows on scroll with infinite scrolling in Material React Table"
+  />
+</Head>
+## Infinite Scrolling Example
+An infinite scrolling table is a table that streams data from a remote server as the user scrolls down the table. This works great with large datasets, just like our [Virtualized Example](/docs/examples/virtualized), except here we do not fetch all of the data at once upfront. Instead, we just fetch data a little bit at a time, as it becomes necessary.
+Using a library like [`@tanstack/react-query`](https://tanstack.com/query/v4) makes it easy to implement an infinite scrolling table in Material React Table with the `useInfiniteQuery` hook.
+Enabling the virtualization feature is actually optional here but is encouraged if the table will be expected to render more than 100 rows at a time.
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/prop-playground--default)**

package/apps/material-react-table-docs/pages/docs/examples/lazy-detail-panel.mdx ADDED Viewed

@@ -0,0 +1,28 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/RemoteFetchingExamples';
+<Head>
+  <title>{'Lazy Detail Panel Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="A Material React Table example show how use use expandable rows to show additional information about a row and load the data for the detail panel only after the user expands the row."
+  />
+  <meta
+    property="og:title"
+    content="Lazy Detail Panel Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="A Material React Table example show how use use expandable rows to show additional information about a row and load the data for the detail panel only after the user expands the row."
+  />
+</Head>
+## Lazy Detail Panel Example
+Fetching the additional data for the detail panels only after the user clicks to expand the row can be a good way to improve performance, and it is pretty easy to implement in Material React Table.
+It's even easier if you are using [React Query.](https://tanstack.com/query/latest) In this example, react query is used to fetch the data for the detail panel, but only after the user clicks to expand the row. The data is also cached for a certain period of time so that when the detail panel is closed and reopened, the data is already available and won't need to be re-fetched.
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-aggregation-examples)**

package/apps/material-react-table-docs/pages/docs/examples/lazy-sub-rows.mdx ADDED Viewed

@@ -0,0 +1,30 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/RemoteFetchingExamples';
+<Head>
+  <title>{'Lazy Sub-Rows Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="A Material React Table example show how use use expandable rows to fetch additional sub-rows data only after the user expands the row."
+  />
+  <meta
+    property="og:title"
+    content="Lazy Sub-Rows Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="A Material React Table example show how use use expandable rows to fetch additional sub-rows data only after the user expands the row."
+  />
+</Head>
+## Lazy Sub-Rows Example
+If you have a ton of nested data that you want to display, but you don't want to fetch it all up front, you can set up Material React Table to only fetch the sub-rows data when the user expands the row.
+There are quite a few ways in which you could implement fetching sub-rows lazily. This example is just one way to do it.
+This example combines concepts from the [React Query Example](/docs/examples/react-query) and the [Expanding Parsed Tree Example](/docs/examples/expanding-tree-flat-parse).
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-aggregation-examples)**

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

@@ -0,0 +1,30 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/BasicExamples';
+<Head>
+  <title>{'Minimal Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="A minimal example of Material React Table which turns off most of the advanced features"
+  />
+  <meta
+    property="og:title"
+    content="Opting out of features in Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="Learn how to turn off and simplify certain features in Material React Table"
+  />
+</Head>
+## Minimal Example
+Material React Table gives you a lot out of the box, but it's also easy to turn off any features that you do not need.
+Every feature has an `enable...` table option that let's you turn it on or off.
+For example, you can turn off sorting or hide the top or bottom toolbars if you want.
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/prop-playground--minimum-features)**

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

@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/FilteringExamples';
+<Head>
+  <title>{'Popover Filters Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of Material React Table which shows an excel-like column filters."
+  />
+  <meta
+    property="og:title"
+    content="Popover Filters Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="An example of Material React Table which shows an excel-like column filters."
+  />
+</Head>
+## Popover Filters Example
+Material React Table supports displaying column filters in other ways than in the default sub-header location. This example shows how to only display column filters when the user clicks on the filter icon in the header and then display the filters in a popover. Learn more in the full [Column Filtering Feature Guide](/docs/guides/column-filtering).
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/prop-playground--default)**

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

@@ -0,0 +1,30 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/RemoteFetchingExamples';
+<Head>
+  <title>{'React Query Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of Material React Table which shows how to fetch remote data and filter and paginate on a remote server with react-query"
+  />
+  <meta
+    property="og:title"
+    content="React Query with Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="Learn best practices with React Query with Material React Table"
+  />
+</Head>
+## React Query (Remote) Example
+This is just like the [Remote Data Fetching Example](/docs/examples/remote), but react-query is used to simplify all the state management of the fetching and loading of data.
+[React Query](https://tanstack.com/query/v4) is by far the best way to fetch remote data in React. It has features like caching, refetching, polling, pagination, and more that work together very well with table logic as seen in this example.
+Also, be sure to check out the [Virtualized Example](/docs/examples/virtualized), which shows off the use of another TanStack library, [React Virtual](https://tanstack.com/virtual/v3), to render thousands of rows at once while still maintaining great performance.
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/prop-playground--default)**

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

@@ -0,0 +1,28 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/RemoteFetchingExamples';
+<Head>
+  <title>{'Remote Data Fetching Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of Material React Table which shows how to fetch remote data and filter and paginate on a remote server"
+  />
+  <meta
+    property="og:title"
+    content="Remote Data Fetching with Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="Learn best practices with Remote Data Fetching with Material React Table"
+  />
+</Head>
+## Remote Data Fetching Example
+You will most likely be using a remote data source for your table, which is fully supported. Here is an example of data being fetched from a remote server but also filtered, paginated, and sorted on the server.
+Also, be sure to check out the [React Query Example](/docs/examples/react-query), which is very similar to this one, except it uses react-query to simplify much of the state management needed for fetching data, so that you don't need to fetch from a `useEffect` hook.
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/prop-playground--default)**

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

@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/DraggingExamples';
+<Head>
+  <title>{'Row Dragging Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of Material React Table which shows how to drag and drop rows for various use cases."
+  />
+  <meta
+    property="og:title"
+    content="Row Dragging Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="An example of Material React Table which shows how to drag and drop rows for various use cases."
+  />
+</Head>
+## Row Dragging Example
+Material React Table has built-in support row drag and drop features that can be used in a variety of ways. Learn more about column ordering in the [Row Ordering/DnD Feature Guide](/docs/guides/row-ordering-dnd).
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/prop-playground--default)**

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

@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/DraggingExamples';
+<Head>
+  <title>{'Row DnD Ordering Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of Material React Table which shows how to enable column to be re-arranged via drag and drop."
+  />
+  <meta
+    property="og:title"
+    content="Row Dnd Ordering Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="An example of Material React Table which shows how to enable column to be re-arranged via drag and drop."
+  />
+</Head>
+## Row DnD Ordering Example
+Material React Table has built-in support for row drag and drop re-ordering. Learn more about column ordering in the [Row Ordering Feature Guide](/docs/guides/row-ordering-dnd).
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/prop-playground--default)**

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

@@ -0,0 +1,32 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/VirtualizedExamples';
+<Head>
+  <title>{'Row Virtualization Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of a Material React Table with row virtualization enabled to achieve higher performance when rendering large data sets"
+  />
+  <meta
+    property="og:title"
+    content="Row Virtualization in Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="Learn how to enable row virtualization features in Material React Table"
+  />
+</Head>
+## Row Virtualization Example
+Material React Table has a built-in row virtualization feature (via [`@tanstack/react-virtual`](https://tanstack.com/virtual/v3)) that allows you to render a large number of rows without major performance issues that you would normally see with a large number of DOM elements.
+Try out the performance of the table below with **10,000 rows**! Filtering, Search, and Sorting also maintain usable performance.
+Be sure to also check out the full [virtualization feature guide docs](/docs/guides/virtualization) to learn about both Row and Column Virtualization.
+> NOTE: You should only enable row virtualization if you have a large number of rows or columns. Depending on the size of the table, if you are rendering fewer than a couple dozen rows at a time, you will actually just be adding extra overhead to the table renders. Virtualization only becomes necessary when you have over 50 rows or so at the same time with no pagination or dozens of columns.
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-virtualization--enable-row-virtualization)**

package/apps/material-react-table-docs/pages/docs/examples/static-row-pinning.mdx ADDED Viewed

@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/StickyPinningExamples';
+<Head>
+  <title>{'Static Row Pinning Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of Material React Table which shows how to pin individual rows to the top or bottom of the table to keep them in view while scrolling."
+  />
+  <meta
+    property="og:title"
+    content="Static Row Pinning Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="An example of Material React Table which shows how to pin individual rows to the top or bottom of the table to keep them in view while scrolling."
+  />
+</Head>
+## Static Row Pinning Example
+Material React Table has the ability to pin rows and keep them in view while scrolling. In this example, when rows are pinned, they will be pinned statically to either the top or bottom of the table. Learn more about row pinning in the [Row Pinning Feature Guide](/docs/guides/row-pinning).
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/prop-playground--default)**

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

@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/StickyPinningExamples';
+<Head>
+  <title>{'Sticky Header Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of Material React Table which shows how to make the header and footer sticky while scrolling."
+  />
+  <meta
+    property="og:title"
+    content="Sticky Header Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="An example of Material React Table which shows how to make the header and footer sticky while scrolling."
+  />
+</Head>
+## Sticky Header Example
+Material React Table allows you to easily make the header and footer sticky while scrolling. See the [Sticky Header Feature Guide](/docs/guides/sticky-header) for more information.
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/prop-playground--default)**

package/apps/material-react-table-docs/pages/docs/examples/sticky-row-pinning.mdx ADDED Viewed

@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/StickyPinningExamples';
+<Head>
+  <title>{'Sticky Row Pinning Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of Material React Table which shows how to pin individual rows and have them be sticky and stay in view while scrolling."
+  />
+  <meta
+    property="og:title"
+    content="Sticky Row Pinning Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="An example of Material React Table which shows how to pin individual rows and have them be sticky and stay in view while scrolling."
+  />
+</Head>
+## Sticky Row Pinning Example
+Material React Table has the ability to pin rows and keep them in view while scrolling. In this example, when rows are pinned, they will initially appear to stay in place, but when the user scrolls up or down, the rows will stick to the top or bottom of the table. Learn more about row pinning in the [Row Pinning Feature Guide](/docs/guides/row-pinning).
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/prop-playground--default)**

package/apps/material-react-table-docs/pages/docs/examples/sticky-row-selection.mdx ADDED Viewed

@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/StickyPinningExamples';
+<Head>
+  <title>{'Sticky Row Selection Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of Material React Table which shows how to pin individual rows as they get selected and have them be sticky and stay in view while scrolling."
+  />
+  <meta
+    property="og:title"
+    content="Sticky Row Selection Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="An example of Material React Table which shows how to pin individual rows as they get selected and have them be sticky and stay in view while scrolling."
+  />
+</Head>
+## Sticky Row Selection Example
+Material React Table has the ability to pin rows as they are selected and keep them in view while scrolling. In this example, when rows are selected, they will initially appear to stay in place, but when the user scrolls up or down, the selected rows will stick to the top or bottom of the table. Learn more about row pinning in the [Row Pinning Feature Guide](/docs/guides/row-pinning).
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/prop-playground--default)**

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

@@ -0,0 +1,32 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/VirtualizedExamples';
+<Head>
+  <title>{'Virtualized Example - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of a Material React Table with virtualization enabled to achieve higher performance when rendering large data sets"
+  />
+  <meta
+    property="og:title"
+    content="Virtualization in Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="Learn how to enable virtualization features in Material React Table"
+  />
+</Head>
+## Virtualized Example
+Material React Table has a built-in virtualization features (via [`@tanstack/react-virtual`](https://tanstack.com/virtual/v3)) that allows you to render a large number of rows or columns without major performance issues that you would normally see with a large number of DOM elements.
+Try out the performance of the table below with **10,000 rows** and over a dozen columns! Filtering, Search, and Sorting also maintain usable performance.
+Be sure to also check out the full [virtualization feature guide docs](/docs/guides/virtualization) to learn about both Row and Column Virtualization.
+> NOTE: You should only enable row virtualization if you have a large number of rows or columns. Depending on the size of the table, if you are rendering fewer than a couple dozen rows at a time, you will actually just be adding extra overhead to the table renders. Virtualization only becomes necessary when you have over 50 rows or so at the same time with no pagination or dozens of columns.
+<Examples isPage />
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-virtualization--enable-row-virtualization)**

package/apps/material-react-table-docs/pages/docs/getting-started/index.mdx ADDED Viewed

@@ -0,0 +1,17 @@
+import Head from 'next/head';
+import TableOfContentsList from '../../../components/navigation/TableOfContentsList';
+import { routes } from '../../../components/navigation/routes';
+<Head>
+  <title>{'Getting Started - Material React Table V3 Docs'}</title>
+  <meta
+    name="description"
+    content="Getting Started with Material React Table"
+  />
+</Head>
+## Getting Started
+<TableOfContentsList
+  items={routes.find((item) => item.href === '/docs/getting-started').items}
+/>

package/apps/material-react-table-docs/pages/docs/getting-started/install.mdx ADDED Viewed

@@ -0,0 +1,124 @@
+import Head from 'next/head';
+import { InstallCommand } from '../../../components/mdx/InstallCommand';
+import { FAQs } from '../../../components/mdx/FAQs';
+import { CompatibilityTable } from '../../../components/mdx/CompatibilityTable';
+<Head>
+  <title>{'Installation - Material React Table V3 Docs'}</title>
+  <meta name="description" content="How to install Material React Table" />
+</Head>
+## Installation
+These are install instructions for the latest version of Material React Table (V3)
+### Compatibility
+First, before installing Material React Table, let's make sure you have the correct versions of React, Material UI, and Material UI X Date Pickers installed.
+<CompatibilityTable />
+> `material-react-table` requires **Material UI V6** packages as dependencies in your project.
+>
+> If you are already using Material UI, you probably already have most of these peer dependencies installed.
+>
+> Just double-check that you have the following in your package.json, or use the [full install commands](<#install-with-required-peer-dependencies-(recommended)>) below.
+>
+> 1.  `@mui/material` (V6)
+> 2.  `@mui/x-date-pickers` (v6)
+> 3.  `@mui/icons-material` (V6)
+> 4.  `@emotion/react` (v11)
+> 5.  `@emotion/styled` (v11)
+> 6.  `react` and `react-dom` (v18+)
+### Quick Install
+<InstallCommand packagesString="material-react-table" />
+### Install With Required Peer Dependencies (Recommended)
+<InstallCommand />
+> You do NOT need to install `@tanstack/react-table`, as it is already an internal dependency of `material-react-table`, and must use an exact version already specified internally.
+>
+> All internal dependencies: `@tanstack/match-sorter-utils`, `@tanstack/react-table`, `@tanstack/react-virtual`, and `highlight-words`
+### Common Errors
+If you see a react import error like this:
+```bash
+Uncaught TypeError: (0 , import_react15.useId) is not a function
+    at useMRT_TableOptions (useMRT_TableOptions.ts:95:8)
+    at useMaterialReactTable (useMaterialReactTable.ts:12:24)
+```
+It means that you don't have the correct version of React installed. Make sure you have React 18.0 or higher.
+---
+If you get an error like this:
+```bash
+"Error: Element type is invalid: expected a string (for built-in components)
+or a class/function (for composite components) but got: undefined.
+```
+You likely forgot to export your component from the file it's defined in,
+or you might have mixed up default and named imports.
+Or You might be trying to import `MaterialReactTable` from the default export still, which is no longer supported in v2+. Make sure you are importing the named export instead:
+```diff
+- import MaterialReactTable from 'material-react-table'
++ import { MaterialReactTable } from 'material-react-table'
+```
+Or you probably do not have the correct version of Material UI installed. Make sure all material ui packages are at least V6.0 or higher if you are using MRT v3 or higher.
+---
+If you are using an older version of `webpack` or `create-react-app` and get an error like this:
+```bash
+./node_modules/@tanstack/virtual-core/build/lib/index.esm.js 147:92
+Module parse failed: Unexpected token (147:92)
+File was processed with these loaders:
+```
+Then try upgrading either `webpack` or `react-scripts` to the latest versions.
+### FAQs
+<FAQs
+  faqStructuredData={{
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: [
+      {
+        '@type': 'Question',
+        name: 'Why is React 18 required for Material React Table?',
+        acceptedAnswer: {
+          '@type': 'Answer',
+          text: '<p>As of MRT V3, it uses some React 18+ features, so React 18 is required. MRT V2 and below are compatible with React 17.</p>',
+        },
+      },
+      {
+        '@type': 'Question',
+        name: "Should I install '@tanstack/react-table' in my package.json for Material React Table?",
+        acceptedAnswer: {
+          '@type': 'Answer',
+          text: "<p><b>No</b>, you do not need to install TanStack Table in your project manually, as the latest TanStack Table version automatically gets installed under the hood by MRT itself as an internal dependency. You can import and functions from '@tanstack/react-table' too.</p>",
+        },
+      },
+      {
+        '@type': 'Question',
+        name: 'Is TypeScript required to use Material React Table?',
+        acceptedAnswer: {
+          '@type': 'Answer',
+          text: '<p><b>No</b>, TypeScript is <b>not required</b> to use Material React Table, but it is a whole lot easier to use Material React Table with TypeScript, <b>especially when defining columns</b>. If you do use TypeScript, try to keep the latest TypeScript version installed, or at least <b>TS version 4.8</b> or higher.</p>',
+        },
+      },
+    ],
+  }}
+/>