From 01591e412384d1e203a0c88db483460c2c4d54c1 Mon Sep 17 00:00:00 2001
From: Kevin Vandy <kevinvandy656@gmail.com>
Date: Tue, 18 Jul 2023 02:04:28 -0500
Subject: [PATCH] release v1.0.0 - Initial Stable Release!

---
 README.md                                     |   4 +-
 .../components/mdx/BlogAuthor.tsx             |  56 +++++
 .../components/mdx/mdxComponents.tsx          |   2 +-
 .../components/navigation/Footer.tsx          |   3 +-
 .../components/navigation/TopBar.tsx          |   2 +-
 .../components/navigation/routes.ts           |  20 +-
 .../example-groups/BasicExamples.tsx          |   1 -
 .../examples/advanced/index.tsx               |   2 +-
 .../examples/basic/index.tsx                  |   2 +-
 .../custom-headless/sandbox/src/JS.js         |   2 +-
 .../custom-headless/sandbox/src/TS.tsx        |   2 +-
 .../enable-column-pinning/sandbox/src/JS.js   |   2 +-
 .../enable-sticky-header/sandbox/src/JS.js    |   2 +-
 .../localization-i18n-da/sandbox/src/JS.js    |   2 +-
 .../localization-i18n-nl/sandbox/src/JS.js    |   2 +-
 .../sandbox/src/JS.js                         |   2 +-
 .../examples/minimal/index.tsx                |   2 +-
 .../pages/blog/index.mdx                      |  14 ++
 .../blog/introducing-mantine-react-table.mdx  | 205 ++++++++++++++++++
 .../pages/changelog.mdx                       |   6 +
 .../pages/docs/guides/data-columns.mdx        |  10 +-
 .../pages/docs/guides/density-toggle.mdx      |  16 +-
 .../pages/docs/guides/detail-panel.mdx        |  34 +--
 .../pages/docs/guides/display-columns.mdx     |  50 +++--
 .../pages/docs/guides/event-listeners.mdx     |  32 +--
 .../pages/docs/guides/expanding-sub-rows.mdx  |  90 ++++----
 .../pages/docs/guides/global-filtering.mdx    | 119 +++++-----
 .../pages/docs/guides/localization.mdx        |  16 +-
 .../pages/docs/index.mdx                      |   2 +-
 .../public/sitemap-0.xml                      |  66 +-----
 packages/mantine-react-table/README.md        |   4 +-
 packages/mantine-react-table/package.json     |   2 +-
 32 files changed, 495 insertions(+), 279 deletions(-)
 create mode 100644 apps/mantine-react-table-docs/components/mdx/BlogAuthor.tsx
 create mode 100644 apps/mantine-react-table-docs/pages/blog/index.mdx
 create mode 100644 apps/mantine-react-table-docs/pages/blog/introducing-mantine-react-table.mdx

diff --git a/README.md b/README.md
index a19bae0ab..4947037c2 100644
--- a/README.md
+++ b/README.md
@@ -2,9 +2,9 @@
 
 View the [Docs Site](https://www.mantine-react-table.com/)
 
-A work in progress fork of [Material React Table](https://www.material-react-table.com)
+A fork of [Material React Table](https://www.material-react-table.com)
 
-Coming soon in early 2023, but you can try out the beta now.
+V1 released July 18, 2023
 
 <a href="https://npmjs.com/package/mantine-react-table" target="_blank">
   <img alt="" src="https://badgen.net/npm/v/mantine-react-table?color=blue" />
diff --git a/apps/mantine-react-table-docs/components/mdx/BlogAuthor.tsx b/apps/mantine-react-table-docs/components/mdx/BlogAuthor.tsx
new file mode 100644
index 000000000..a669370be
--- /dev/null
+++ b/apps/mantine-react-table-docs/components/mdx/BlogAuthor.tsx
@@ -0,0 +1,56 @@
+import Image from 'next/image';
+import { Box, Anchor, Stack, Title, Text } from '@mantine/core';
+
+interface Props {
+  author?: string;
+  authorImage?: string;
+  authorLink?: string;
+  publishDate: string;
+}
+
+export const BlogAuthor = ({
+  author = 'Kevin Van Cott',
+  authorImage = '/contributors/kevinvancott.jpg',
+  authorLink = 'https://www.kevinvancott.dev',
+  publishDate,
+}: Props) => {
+  return (
+    <Stack>
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: 'auto 50px',
+          gap: '1rem',
+          justifyContent: 'flex-start',
+          alignItems: 'center',
+        }}
+      >
+        <Text fz="14pt">
+          By{' '}
+          <Anchor
+            color="text.primary"
+            sx={{
+              textDecoration: 'none',
+              '&:hover': { textDecoration: 'underline' },
+            }}
+            target="_blank"
+            rel="noopener noreferrer"
+            href={authorLink}
+          >
+            {author}
+          </Anchor>
+        </Text>
+        <Image
+          alt="author"
+          src={authorImage}
+          width={30}
+          height={30}
+          style={{ borderRadius: '50%' }}
+        />
+      </Box>
+      <Text color="gray">
+        Published: <i>{new Date(publishDate).toLocaleDateString()}</i>
+      </Text>
+    </Stack>
+  );
+};
diff --git a/apps/mantine-react-table-docs/components/mdx/mdxComponents.tsx b/apps/mantine-react-table-docs/components/mdx/mdxComponents.tsx
index 0b4ec8183..4161f0452 100644
--- a/apps/mantine-react-table-docs/components/mdx/mdxComponents.tsx
+++ b/apps/mantine-react-table-docs/components/mdx/mdxComponents.tsx
@@ -1,4 +1,4 @@
-import {  Divider, Text, Title } from '@mantine/core';
+import { Divider, Text, Title } from '@mantine/core';
 import { Blockquote } from './Blockquote';
 import { SampleCodeSnippet } from './SampleCodeSnippet';
 import { LinkHeading } from './LinkHeading';
diff --git a/apps/mantine-react-table-docs/components/navigation/Footer.tsx b/apps/mantine-react-table-docs/components/navigation/Footer.tsx
index 5f91415ae..ce693509f 100644
--- a/apps/mantine-react-table-docs/components/navigation/Footer.tsx
+++ b/apps/mantine-react-table-docs/components/navigation/Footer.tsx
@@ -103,8 +103,7 @@ export const Footer = () => {
             items={
               routes
                 .find((item) => item.href === '/docs/api')
-                ?.items?.find((item) => item.label === 'Options')
-                ?.items ?? []
+                ?.items?.find((item) => item.label === 'Options')?.items ?? []
             }
             isFooter
           />
diff --git a/apps/mantine-react-table-docs/components/navigation/TopBar.tsx b/apps/mantine-react-table-docs/components/navigation/TopBar.tsx
index 4757ce6ce..9d7707f69 100644
--- a/apps/mantine-react-table-docs/components/navigation/TopBar.tsx
+++ b/apps/mantine-react-table-docs/components/navigation/TopBar.tsx
@@ -86,7 +86,7 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => {
         })}
       >
         <Flex align="center" gap="md">
-          {(!isDesktop || pathname === "/") && (
+          {(!isDesktop || pathname === '/') && (
             <Burger
               color="white"
               opened={navOpen}
diff --git a/apps/mantine-react-table-docs/components/navigation/routes.ts b/apps/mantine-react-table-docs/components/navigation/routes.ts
index d6b5b9eb6..37e0c2e17 100644
--- a/apps/mantine-react-table-docs/components/navigation/routes.ts
+++ b/apps/mantine-react-table-docs/components/navigation/routes.ts
@@ -287,16 +287,16 @@ export const routes: Array<RouteItem> = [
       },
     ],
   },
-  // {
-  //   label: 'Blog',
-  //   href: '/blog',
-  //   items: [
-  //     {
-  //       href: '/blog',
-  //       label: 'Blog',
-  //     },
-  //   ],
-  // },
+  {
+    label: 'Blog',
+    href: '/blog',
+    items: [
+      {
+        href: '/blog/introducing-mantine-react-table',
+        label: 'Introducing Mantine React Table',
+      },
+    ],
+  },
   {
     label: 'Other',
     href: '#',
diff --git a/apps/mantine-react-table-docs/example-groups/BasicExamples.tsx b/apps/mantine-react-table-docs/example-groups/BasicExamples.tsx
index 85935bbe1..a01105a4a 100644
--- a/apps/mantine-react-table-docs/example-groups/BasicExamples.tsx
+++ b/apps/mantine-react-table-docs/example-groups/BasicExamples.tsx
@@ -20,7 +20,6 @@ const BasicExamples = ({ isPage = false }) => {
             isPage ? push(newPath as string) : setActiveTab(newPath as string)
           }
           keepMounted={false}
-          
         >
           <Tabs.List grow={!isPage}>
             <Tabs.Tab value="basic">Basic</Tabs.Tab>
diff --git a/apps/mantine-react-table-docs/examples/advanced/index.tsx b/apps/mantine-react-table-docs/examples/advanced/index.tsx
index 43a6b9d6c..e1b52987d 100644
--- a/apps/mantine-react-table-docs/examples/advanced/index.tsx
+++ b/apps/mantine-react-table-docs/examples/advanced/index.tsx
@@ -4,7 +4,7 @@ const JS = require('!!raw-loader!./sandbox/src/JS.js').default;
 const TS = require('!!raw-loader!./sandbox/src/TS.tsx').default;
 const Legacy = require('!!raw-loader!./sandbox/src/Legacy.tsx').default;
 
-const ExampleTable = ({showTopRow = true}) => {
+const ExampleTable = ({ showTopRow = true }) => {
   return (
     <SourceCodeSnippet
       Component={Example}
diff --git a/apps/mantine-react-table-docs/examples/basic/index.tsx b/apps/mantine-react-table-docs/examples/basic/index.tsx
index c0b9a330f..c6c380e58 100644
--- a/apps/mantine-react-table-docs/examples/basic/index.tsx
+++ b/apps/mantine-react-table-docs/examples/basic/index.tsx
@@ -4,7 +4,7 @@ const JS = require('!!raw-loader!./sandbox/src/JS.js').default;
 const TS = require('!!raw-loader!./sandbox/src/TS.tsx').default;
 const Legacy = require('!!raw-loader!./sandbox/src/Legacy.tsx').default;
 
-const ExampleTable = ({showTopRow = true}) => {
+const ExampleTable = ({ showTopRow = true }) => {
   return (
     <SourceCodeSnippet
       Component={Example}
diff --git a/apps/mantine-react-table-docs/examples/custom-headless/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/custom-headless/sandbox/src/JS.js
index 22cdeaa65..c2983fe5a 100644
--- a/apps/mantine-react-table-docs/examples/custom-headless/sandbox/src/JS.js
+++ b/apps/mantine-react-table-docs/examples/custom-headless/sandbox/src/JS.js
@@ -45,7 +45,7 @@ const Example = () => {
     mantinePaginationProps: {
       rowsPerPageOptions: ['5', '10', '15'],
     },
-    paginationDisplayMode: 'pages'
+    paginationDisplayMode: 'pages',
   });
 
   return (
diff --git a/apps/mantine-react-table-docs/examples/custom-headless/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/custom-headless/sandbox/src/TS.tsx
index fb82455ba..5fe6b6d81 100644
--- a/apps/mantine-react-table-docs/examples/custom-headless/sandbox/src/TS.tsx
+++ b/apps/mantine-react-table-docs/examples/custom-headless/sandbox/src/TS.tsx
@@ -46,7 +46,7 @@ const Example = () => {
     mantinePaginationProps: {
       rowsPerPageOptions: ['5', '10', '15'],
     },
-    paginationDisplayMode: 'pages'
+    paginationDisplayMode: 'pages',
   });
 
   return (
diff --git a/apps/mantine-react-table-docs/examples/enable-column-pinning/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/enable-column-pinning/sandbox/src/JS.js
index 0e6f7ea67..dd2a7962a 100644
--- a/apps/mantine-react-table-docs/examples/enable-column-pinning/sandbox/src/JS.js
+++ b/apps/mantine-react-table-docs/examples/enable-column-pinning/sandbox/src/JS.js
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
+import { MantineReactTable } from 'mantine-react-table';
 import { data } from './makeData';
 
 const Example = () => {
diff --git a/apps/mantine-react-table-docs/examples/enable-sticky-header/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/enable-sticky-header/sandbox/src/JS.js
index a8bd0a617..e5318fd45 100644
--- a/apps/mantine-react-table-docs/examples/enable-sticky-header/sandbox/src/JS.js
+++ b/apps/mantine-react-table-docs/examples/enable-sticky-header/sandbox/src/JS.js
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { MantineReactTable } from 'mantine-react-table';
-import { data, type Person } from './makeData';
+import { data } from './makeData';
 
 const Example = () => {
   const columns = useMemo(
diff --git a/apps/mantine-react-table-docs/examples/localization-i18n-da/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/localization-i18n-da/sandbox/src/JS.js
index c9d77dd60..6ec4a7308 100644
--- a/apps/mantine-react-table-docs/examples/localization-i18n-da/sandbox/src/JS.js
+++ b/apps/mantine-react-table-docs/examples/localization-i18n-da/sandbox/src/JS.js
@@ -7,7 +7,7 @@ import { MRT_Localization_DA } from 'mantine-react-table/locales/da';
 //mock data
 import { data } from './makeData';
 
-const columns: MRT_ColumnDef<Person>[] = [
+const columns = [
   {
     accessorKey: 'firstName',
     header: 'Fornavn',
diff --git a/apps/mantine-react-table-docs/examples/localization-i18n-nl/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/localization-i18n-nl/sandbox/src/JS.js
index 9391b039b..51d08e7c3 100644
--- a/apps/mantine-react-table-docs/examples/localization-i18n-nl/sandbox/src/JS.js
+++ b/apps/mantine-react-table-docs/examples/localization-i18n-nl/sandbox/src/JS.js
@@ -1,5 +1,5 @@
 //Import Mantine React Table and its Types
-import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
+import { MantineReactTable } from 'mantine-react-table';
 
 //Import Mantine React Table Translations
 import { MRT_Localization_NL } from 'mantine-react-table/locales/nl';
diff --git a/apps/mantine-react-table-docs/examples/localization-i18n-sr-Cyrl-RS/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/localization-i18n-sr-Cyrl-RS/sandbox/src/JS.js
index cffd5053e..9f8b191fa 100644
--- a/apps/mantine-react-table-docs/examples/localization-i18n-sr-Cyrl-RS/sandbox/src/JS.js
+++ b/apps/mantine-react-table-docs/examples/localization-i18n-sr-Cyrl-RS/sandbox/src/JS.js
@@ -5,7 +5,7 @@ import { MantineReactTable } from 'mantine-react-table';
 import { MRT_Localization_SR_CYRL_RS } from 'mantine-react-table/locales/sr-Cyrl-RS';
 
 //mock data
-import { data, type Person } from './makeData';
+import { data } from './makeData';
 
 const columns = [
   {
diff --git a/apps/mantine-react-table-docs/examples/minimal/index.tsx b/apps/mantine-react-table-docs/examples/minimal/index.tsx
index a381fa3a4..30bcfc4e2 100644
--- a/apps/mantine-react-table-docs/examples/minimal/index.tsx
+++ b/apps/mantine-react-table-docs/examples/minimal/index.tsx
@@ -4,7 +4,7 @@ const JS = require('!!raw-loader!./sandbox/src/JS.js').default;
 const TS = require('!!raw-loader!./sandbox/src/TS.tsx').default;
 const Legacy = require('!!raw-loader!./sandbox/src/Legacy.tsx').default;
 
-const ExampleTable = ({showTopRow = true}) => {
+const ExampleTable = ({ showTopRow = true }) => {
   return (
     <SourceCodeSnippet
       Component={Example}
diff --git a/apps/mantine-react-table-docs/pages/blog/index.mdx b/apps/mantine-react-table-docs/pages/blog/index.mdx
new file mode 100644
index 000000000..d5e76a932
--- /dev/null
+++ b/apps/mantine-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>Mantine React Table Blog</title>
+  <meta name="description" content="Mantine React Table Blog Posts" />
+</Head>
+
+## Blog
+
+<TableOfContentsList
+  items={routes.find((item) => item.href === '/blog').items}
+/>
diff --git a/apps/mantine-react-table-docs/pages/blog/introducing-mantine-react-table.mdx b/apps/mantine-react-table-docs/pages/blog/introducing-mantine-react-table.mdx
new file mode 100644
index 000000000..2f0ed31cf
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/blog/introducing-mantine-react-table.mdx
@@ -0,0 +1,205 @@
+import Head from 'next/head';
+import Image from 'next/image';
+import { BlogAuthor } from '../../components/mdx/BlogAuthor';
+
+<Head>
+  <title>{'Introducing Mantine React Table V1 - MRT Blog'}</title>
+  <meta
+    name="description"
+    content="Mantine React Table V1 is finally released. Here is everything unique that it brings to the table"
+  />
+  <script
+    type="application/ld+json"
+    dangerouslySetInnerHTML={{
+      __html: JSON.stringify({
+        '@context': 'https://schema.org',
+        '@type': 'BlogPosting',
+        headline: 'Introducing Mantine React Table V1',
+        keywords: ['React', 'Mantine', 'TanStack', 'Datagrid', 'NPM'],
+        wordCount: 1430,
+        datePublished: '2023-07-18',
+        dateModified: '2023-07-18',
+        author: [
+          {
+            '@type': 'Person',
+            name: 'Kevin Van Cott',
+            url: 'https://www.kevinvancott.dev/',
+          },
+        ],
+      }),
+    }}
+  />
+</Head>
+
+## Introducing Mantine React Table V1
+
+<BlogAuthor publishDate="2023/07/18" />
+
+I'm finally releasing `mantine-react-table` as stable with its initial V1 release. I have been working on this for the past 7 months, and though I originally wanted to release it much earlier, I'm glad that I kept it in beta as long as I did. Tons of bugs have been fixed, but more importantly, I was able to make a few breaking changes in the month leading up to this release where I was able to introduce a new paradigm to MRT that makes it much easier to work with, as it is now much more similar to TanStack Table.
+
+### Building on Material React Table
+
+Mantine React Table comes as a fork on my first popular library, [Material React Table](https://material-react-table.com). The initial fork only took about a month to get up to feature parody, and it was mostly done as a proof of concept at first to see how easy it would be to create more libraries built on top of TanStack Table in the same way that I had built Material React Table. Mantine is built very similarly to Material-UI, and so it was relatively easy to fork. It had the same Emotion styled system (pre V7), and most of the components had one-to-one counterparts as Material UI.
+
+What I was not expecting, was that I would end up liking Mantine so much more than Material UI. Mantine components just seem "better by default". I ended up writing much less CSS overrides than I did with Material UI, and the components just seemed to work better out of the box. They also just look better, in my opinion, as they don't have to stick to a decade+ old Material Design spec.
+
+I ended up getting a new job at a startup this year, and it seemed that the perfect opportunity to make this into my main project was there. So for the past couple of months, I have been using the Mantine version of MRT in production at my dat job. It has been working well, and all new development and features are being driven through the Mantine version of MRT first. The Material version of MRT is not going anywhere, and it will continue to keep up with the Mantine version. It still has 10 times as many downloads, and gets most of the issues and PRs from the community still. What's great about maintaining two similar projects in slightly different developer communities is that the projects can benefit from each other. Every time a bug is fixed in one, it also gets fixed in the other. It's a win-win for everyone.
+
+### What Makes MRT Different?
+
+There are a ton of features that have been stabilized and polished over the past few months, like advanced filter UI, virtualization, fuzzy search, and more that you could argue set MRT apart from a lot of similar data grid libraries, but the real difference that I think sets MRT apart is that it is now fully embracing the patterns of TanStack Table, and allowing inversion of control to the developer.
+
+#### The Option of Inversion of Control
+
+What do I mean by Inversion of Control? This concept is not new, and has been especially present in libraries like Downshift and React Table V7 and up. The idea is that developers can be in charge of their own UI markup and the library will mostly just provide logical state and data control. I highly recommend watching [this talk by Tanner Linsley](https://www.youtube.com/watch?v=O4IWJcafX8c) to learn more about this.
+
+If you look at Material React Table V1, or pretty much any other data grid library, you will see a single component data grid where its usage looks something like this:
+
+```jsx
+import { DataGrid } from 'data-grid-library';
+//...
+return (
+  <DataGrid //traditional single component data grid library
+    columns={columns}
+    rows={rows}
+    //more options
+  />
+);
+```
+
+Pass in your columns, data, and options, but what goes on under the hood is a mystery, and trying to control or tweak anything going on is a pain. Now I think Material React Table V1 still does a great job of making it easy to customize and control the inner workings, but now in Mantine React Table, we are getting to the next level by allowing full control of the TanStack Table instance that powers MRT.
+
+```jsx
+import { useMantineReactTable, MantineReactTable } from 'mantine-react-table';
+//...
+const table = useMantineReactTable({
+  columns,
+  rows,
+  //more options
+});
+
+return <MantineReactTable table={table} />;
+```
+
+This doesn't look that much different, but there is actually a ton of new flexibility here. In this example, we are still just using a single component for the entire data grid. However, because we have access to the entire table instance object from the `useMantineReactTable` hook, we could just build the entire table UI ourselves if we want to. Here is a bare bones example of what that might look like:
+
+```jsx
+import { Table } from '@mantine/core';
+import { useMantineReactTable } from 'mantine-react-table';
+//...
+const table = useMantineReactTable({
+  columns,
+  rows,
+  //more options
+});
+
+return (
+  <Table striped withBorder>
+    <thead>
+      {table.getHeaderGroups().map((headerGroup) => (
+        <tr key={headerGroup.id}>
+          {headerGroup.headers.map((header) => (
+            <th key={header.id}>{header.column.columnDef.header}</th>
+          ))}
+        </tr>
+      ))}
+    </thead>
+    <tbody>
+      {table.getRowModel().rows.map((row) => (
+        <tr key={row.id}>
+          {row.getVisibleCells().map((cell) => (
+            <td key={cell.id}>{cell.getValue()}</td>
+          ))}
+        </tr>
+      ))}
+    </tbody>
+  </Table>
+);
+```
+
+This example is not any different from using vanilla TanStack Table with Mantine components. The real power comes when if you start to use a hybrid of pre-built MRT components alongside your own UI whenever you need 100% control over your UI.
+
+#### MRT is a Table Component Library
+
+All internal components and utility functions are now exported from MRT. So if you want to combine your own UI with MRT components, you can do that!
+
+```jsx
+import { Table } from '@mantine/core';
+import {
+  useMantineReactTable,
+  MRT_GlobalFilterTextInput,
+  MRT_TableBody,
+  MRT_TablePagination,
+} from 'mantine-react-table';
+//...
+const table = useMantineReactTable({
+  columns,
+  rows,
+  //more options
+});
+
+return (
+  <Stack>
+    <MRT_GlobalFilterTextInput table={table} /> {/* MRT search component */}
+    <Table striped withBorder>
+      {/* Custom table head markup */}
+      <thead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <th key={header.id}>{header.column.columnDef.header}</th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <MRT_TableBody table={table} /> {/* MRT table body component */}
+    </Table>
+    <MRT_TablePagination table={table} /> {/* MRT pagination component */}
+  </Stack>
+);
+```
+
+In this example, the developer wants 100% control over the UI and markup in the table head rows, so they just code that themselves. Also, they don't care about all of the features in the top and bottom toolbars, so they just import the sub-components that they actually care about for their use case. This is the real power of the optional inversion of control in MRT. You can use as much or as little of the library as you want, and you can combine it with your own UI whenever you need to.
+
+#### The Single Component Data Grid is Still There
+
+MRT still has the single component data grid experience that you are used to, of course. In fact, I expect 90% of developers will still just use it this way. Mantine React Table offers the best of both worlds. Easy to use Data Grids with the option to switch over to manual mode when you need it.
+
+```jsx
+import { MantineReactTable } from 'mantine-react-table';
+//...
+return (
+  // traditional single component experience is still there for quick tables
+  <MantineReactTable
+    columns={columns}
+    rows={rows}
+    //more options
+  />
+);
+```
+
+### What Features are Available?
+
+So enough about the new architecture, what features are available in Mantine React Table?
+
+MRT has all of the basic table features like pagination, sorting, filtering, grouping, expanding, resizing, selection, pinning, and more. But MRT also has a ton of advanced features that you may not find in other data grid libraries like virtualization, aggregation, full CRUD support, faceted values, fuzzy search, advanced pre-built filter UI components, and more. See the [feature guides](https://mantine-react-table.com/docs/guides) for more complete info.
+
+### Are There Other Mantine React Table Libraries?
+
+Yes! There are a couple that you should know about before choosing MRT right away.
+
+#### 1. [Mantine DataTable](https://icflorescu.github.io/mantine-datatable/)
+
+Mantine DataTable has been around a bit longer that Mantine React Table, and is a very stock Mantine feeling data grid library. It has some, but not all of the same features as MRT, and it is a single component data grid library. It is high quality, and a bit lighter weight than MRT. I would almost describe it as the missing stock Mantine data grid library.
+
+#### 2. [Mantine Data Grid](https://kuechlin.github.io/mantine-data-grid)
+
+Mantine Data Grid is another library that is built on top of TanStack Table. It does not get as much feature development as MRT or MDT. If you are considering it, make sure that the project is active and that it has the features that you need. I really respect the work done on this library with TanStack Table. It just does not seem to have as active of a community.
+
+#### 3. [AG Grid](https://www.ag-grid.com/)
+
+If you need the best possible data grid library out there that can be a full excel replacement, use AG Grid. It is not built with Mantine, but it is the best data grid library out there. You just will have to not care about large bundle sizes, and there is a possibility that you might have to pay for a license if you need some specific advanced features.
+
+### What is the Future of Mantine React Table?
+
+There will be no more breaking changes form Mantine React Table V1. New features are still planned, and bug fixes will continue. However, the elephant in the room is the Mantine V7 upgrade that will need to be done by the end of the year for Mantine React Table V2. Mantine V7 is a major upgrade where the underlying library is being heavily refactored to not use Emotion or CSS in JS at all, so how you style components is going to be a lot different. More to come on that later.
diff --git a/apps/mantine-react-table-docs/pages/changelog.mdx b/apps/mantine-react-table-docs/pages/changelog.mdx
index 0d9570293..39538aee1 100644
--- a/apps/mantine-react-table-docs/pages/changelog.mdx
+++ b/apps/mantine-react-table-docs/pages/changelog.mdx
@@ -12,6 +12,12 @@ import Head from 'next/head';
 
 ### V1
 
+#### V1.0.0 - 2023-07-18
+
+- V1 Stable Release
+
+### V1 Betas
+
 #### V1.0.0-beta.28
 
 - New Loading Overlay in Table Container to indicate loading state that will show when `state.isLoading` or `state.showLoadingOverlay` is `true`
diff --git a/apps/mantine-react-table-docs/pages/docs/guides/data-columns.mdx b/apps/mantine-react-table-docs/pages/docs/guides/data-columns.mdx
index 898162f53..6b8e30778 100644
--- a/apps/mantine-react-table-docs/pages/docs/guides/data-columns.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/guides/data-columns.mdx
@@ -226,14 +226,14 @@ However, the column sizes might not change as much as you would expect. This is
 
 You can improve this slightly by changing the table layout to `fixed` instead of the default `auto` in the `mantineTableProps`.
 
-```tsx
-<MantineReactTable
-  mantineTableProps={{
+```jsx
+const table = useMantineReactTable({
+  mantineTableProps: {
     sx: {
       tableLayout: 'fixed',
     },
-  }}
-/>
+  },
+});
 ```
 
 The columns will still try to increase their width to take up the full width of the table, but the columns that do have a defined size will have their width respected more.
diff --git a/apps/mantine-react-table-docs/pages/docs/guides/density-toggle.mdx b/apps/mantine-react-table-docs/pages/docs/guides/density-toggle.mdx
index c8d5aa922..5e7b433b9 100644
--- a/apps/mantine-react-table-docs/pages/docs/guides/density-toggle.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/guides/density-toggle.mdx
@@ -35,14 +35,14 @@ A density toggle is shown by default to let a user change the density to cycle t
 
 #### Change Default Density
 
-If you want to change the default density, you can set that in either the `initialState` prop or the `state` prop.
-
-```tsx
-<MantineReactTable
-  data={data}
-  columns={columns}
-  initialState={{ density: 'xs' }}
-/>
+If you want to change the default density, you can set that in either the `initialState` or `state` table option.
+
+```jsx
+const table = useMantineReactTable({
+  data,
+  columns,
+  initialState: { density: 'xs' },
+});
 ```
 
 ### Disable or Hide the Density Toggle
diff --git a/apps/mantine-react-table-docs/pages/docs/guides/detail-panel.mdx b/apps/mantine-react-table-docs/pages/docs/guides/detail-panel.mdx
index 84bd8d958..baf2a583a 100644
--- a/apps/mantine-react-table-docs/pages/docs/guides/detail-panel.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/guides/detail-panel.mdx
@@ -38,7 +38,7 @@ If you are looking for how to expand multiple rows from a tree data structure, s
 
 ### Render Detail Panel
 
-To add a detail panel to a row, all you need to do is add a `renderDetailPanel` prop.
+To add a detail panel to a row, all you need to do is add a `renderDetailPanel` table option.
 
 The recommended way to access the row data for the detail panel is to pull from the `original` object on a row. This gives you the original data for the row, not transformed or filtered by TanStack Table.
 
@@ -48,36 +48,36 @@ The recommended way to access the row data for the detail panel is to pull from
 
 ### Expand Detail Panel By Default
 
-If you want some or all rows to be expanded by default, you can specify that in the `initialState.expanded` prop. Pass `true` to expand all rows, or specify which rowIds should be expanded.
+If you want some or all rows to be expanded by default, you can specify that in the `initialState.expanded` table option. Pass `true` to expand all rows, or specify which rowIds should be expanded.
 
-```tsx
+```jsx
 //expand first 2 rows by default
-<MantineReactTable
-  data={data}
-  columns={columns}
-  initialState={{
+const table = useMantineReactTable({
+  data,
+  columns,
+  initialState: {
     expanded: {
       1: true,
       2: true,
     },
-  }}
-/>
+  },
+});
 ```
 
-```tsx
+```jsx
 //expand all rows by default
-<MantineReactTable
-  data={data}
-  columns={columns}
-  initialState={{
+const table = useMantineReactTable({
+  data,
+  columns,
+  initialState: {
     expanded: true,
-  }}
-/>
+  },
+});
 ```
 
 ### Position Expand Column Last
 
-If you want to position the expand column last, you can set the `positionExpandColumn` prop to `'last'`.
+If you want to position the expand column last, you can set the `positionExpandColumn` table option to `'last'`.
 
 <AlternateExample />
 
diff --git a/apps/mantine-react-table-docs/pages/docs/guides/display-columns.mdx b/apps/mantine-react-table-docs/pages/docs/guides/display-columns.mdx
index 4aa7ef200..d0ab91d7f 100644
--- a/apps/mantine-react-table-docs/pages/docs/guides/display-columns.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/guides/display-columns.mdx
@@ -19,11 +19,11 @@ Display columns do not have any processing features, such as sorting, filtering,
 
 Mantine React Table has a few built-in display columns that are created automatically when certain features are enabled.
 
-- `mrt-row-drag` - created when `enableRowDragging` or `enableRowOrdering` prop are `true`
-- `mrt-row-actions` - created when `enableRowActions` (or sometimes when `enableEditing`) props are `true`
-- `mrt-row-expand` - created when `enableExpanding`, `enableGrouping`, or `renderDetailPanel` props are `true`
-- `mrt-row-select` - created when `enableRowSelection` prop is `true`
-- `mrt-row-numbers` - created when `enableRowNumbers` prop is `true`
+- `mrt-row-drag` - created when `enableRowDragging` or `enableRowOrdering` table options are `true`
+- `mrt-row-actions` - created when `enableRowActions` (or sometimes when `enableEditing`) table options are `true`
+- `mrt-row-expand` - created when `enableExpanding`, `enableGrouping`, or `renderDetailPanel` table options are `true`
+- `mrt-row-select` - created when `enableRowSelection` table option is `true`
+- `mrt-row-numbers` - created when `enableRowNumbers` table option is `true`
 
 Display columns are, for the most part, the same as a data column, except they do not have an accessor to access data. When a display column is created internally by Mantine React Table, the following options are all set to false by default:
 
@@ -48,43 +48,45 @@ All of these values are able to be overridden if needed, and you'll learn about
 
 ### Customize Built-in MRT Display Columns
 
-It is possible to change and override the default behavior of built-in display columns. Whether you want to change the default column width, add some styles, or enable some features, such as column actions or column drag and drop, you can do it with the `displayColumnDefOptions` prop.
+It is possible to change and override the default behavior of built-in display columns. Whether you want to change the default column width, add some styles, or enable some features, such as column actions or column drag and drop, you can do it with the `displayColumnDefOptions` table option.
 
-#### Display Column Definition Options Prop
+#### Display Column Definition Options
 
 Let's say you need to adjust the width of the Actions column to be wide enough to fit all of your action buttons. You could do that as follows:
 
 ```jsx
-<MantineReactTable
-  columns={columns}
-  data={data}
-  displayColumnDefOptions={{ 'mrt-row-actions': { size: 300 } }} //change width of actions column to 300px
-  enableRowActions
-  renderRowActions={({ row }) => (
+const table = useMantineReactTable({
+  columns,
+  data,
+  displayColumnDefOptions: { 'mrt-row-actions': { size: 300 } }, //change width of actions column to 300px
+  enableRowActions: true,
+  renderRowActions: ({ row }) => (
     <div>
       <Button>Action 1</Button>
       <Button>Action 2</Button>
       <Button>Action 3</Button>
     </div>
-  )}
-/>
+  ),
+});
+
+return <MantineReactTable table={table} />;
 ```
 
 Or maybe you want to enable a feature that is off by default for display columns, such as column ordering or pinning.
 
-```tsx
-<MantineReactTable
-  columns={columns}
-  data={data}
-  displayColumnDefOptions={{
+```jsx
+const table = useMantineReactTable({
+  columns,
+  data,
+  displayColumnDefOptions: {
     'mrt-row-numbers': {
       enableOrdering: true,
       enablePinning: true,
       enableColumnActions: true,
     },
-  }}
-  enableRowNumbers
-/>
+  },
+  enableRowNumbers: true,
+});
 ```
 
 Here is a full example and demo for customizing display columns.
@@ -95,7 +97,7 @@ Here is a full example and demo for customizing display columns.
 
 You do not have to use the built in Row Actions feature. You can just create your own display columns instead. It is as easy as creating a normal column, only specifying the `columnDefType` as `display`.
 
-```tsx
+```jsx
 const columns = [
   {
     id: 'sendEmail',
diff --git a/apps/mantine-react-table-docs/pages/docs/guides/event-listeners.mdx b/apps/mantine-react-table-docs/pages/docs/guides/event-listeners.mdx
index c7f662d70..07f8c92f4 100644
--- a/apps/mantine-react-table-docs/pages/docs/guides/event-listeners.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/guides/event-listeners.mdx
@@ -24,41 +24,41 @@ Here are a few common examples of some useful event listeners you might want to
 #### Add an onClick to a Table Row
 
 ```jsx
-<MantineReactTable
-  mantineTableBodyRowProps={({ row }) => ({
+const table = useMantineReactTable({
+  mantineTableBodyRowProps: ({ row }) => ({
     onClick: (event) => {
       console.info(event, row.id);
     },
     sx: {
       cursor: 'pointer', //you might want to change the cursor too when adding an onClick
     },
-  })}
-/>
+  }),
+});
 ```
 
 #### Add an onDoubleClick to a Table Cell
 
 ```jsx
-<MantineReactTable
-  mantineTableBodyCellProps={({ cell }) => ({
+const table = useMantineReactTable({
+  mantineTableBodyCellProps: ({ cell }) => ({
     onDoubleClick: (event) => {
       console.info(event, cell.id);
     },
-  })}
-/>
+  }),
+});
 ```
 
 #### Add an onBlur to an Edit TextField
 
 ```jsx
 //add to every edit text field
-<MantineReactTable
-  mantineEditTextInputProps={({ cell }) => ({
+const table = useMantineReactTable({
+  mantineEditTextInputProps: ({ cell }) => ({
     onBlur: (event) => {
       console.info(event, cell.id);
     },
-  })}
-/>
+  }),
+});
 ```
 
 ```jsx
@@ -82,13 +82,13 @@ const columns = [
 
 ```jsx
 //add to every edit text field
-<MantineReactTable
-  mantineEditTextInputProps={({ cell }) => ({
+const table = useMantineReactTable({
+  mantineEditTextInputProps: ({ cell }) => ({
     onChange: (event) => {
       console.info(event, cell.id);
     },
-  })}
-/>
+  }),
+});
 ```
 
 ```jsx
diff --git a/apps/mantine-react-table-docs/pages/docs/guides/expanding-sub-rows.mdx b/apps/mantine-react-table-docs/pages/docs/guides/expanding-sub-rows.mdx
index dc818d276..4caecd8d3 100644
--- a/apps/mantine-react-table-docs/pages/docs/guides/expanding-sub-rows.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/guides/expanding-sub-rows.mdx
@@ -55,9 +55,9 @@ Mantine React Table has support for expanding sub-rows or tree data. This featur
 
 ### Enable Expanding Sub-Rows
 
-To enable expanding sub-rows, you must first set the `enableExpanding` prop to `true`.
+To enable expanding sub-rows, you must first set the `enableExpanding` table option to `true`.
 
-However, your data must also be formatted in a way to allow for expanding rows that are in some way related to each other. By default, Mantine React Table will look for a special `subRows` property on each row of your data and treat any array of rows that it finds as the sub-rows for that row. You can customize or override this behavior by passing a custom `getSubRows` prop.
+However, your data must also be formatted in a way to allow for expanding rows that are in some way related to each other. By default, Mantine React Table will look for a special `subRows` property on each row of your data and treat any array of rows that it finds as the sub-rows for that row. You can customize or override this behavior by passing a custom `getSubRows` table option.
 
 ```jsx
 const data = [
@@ -73,42 +73,42 @@ const data = [
   },
 ];
 
-return (
-  <MantineReactTable
-    columns={columns}
-    data={data}
-    enableExpanding
-    getSubRows={(originalRow) => originalRow.subRows} //default, can customize
-  />
-);
+const table = useMantineReactTable({
+  columns,
+  data,
+  enableExpanding: true,
+  getSubRows: (originalRow) => originalRow.subRows, //default, can customize
+});
+
+return <MantineReactTable table={table} />;
 ```
 
 <EnableExample />
 
 ### Expand All Rows Button
 
-By default, Mantine React Table will show the expand all button in the expand column header. You can disable this by setting the `enableExpandAll` prop to `false`.
+By default, Mantine React Table will show the expand all button in the expand column header. You can disable this by setting the `enableExpandAll` table option to `false`.
 
 ```jsx
-<MantineReactTable
-  columns={columns}
-  data={data}
-  enableExpanding
-  enableExpandAll={false} //hide expand all button in header
-/>
+const table = useMantineReactTable({
+  columns,
+  data,
+  enableExpanding: true,
+  enableExpandAll: false, //hide expand all button in header
+});
 ```
 
 ### Expanded Rows Pagination Behavior
 
-By default, Mantine React Table will treat expanded sub-rows the same as any other row when it comes to pagination. This means that some expanded rows may be on the next page. You can change this behavior by setting the `paginateExpandedRows` prop to `false`.
+By default, Mantine React Table will treat expanded sub-rows the same as any other row when it comes to pagination. This means that some expanded rows may be on the next page. You can change this behavior by setting the `paginateExpandedRows` table option to `false`.
 
 ```jsx
-<MantineReactTable
-  columns={columns}
-  data={data}
-  enableExpanding
-  paginateExpandedRows={false} //expanded rows will be on the same page as their parent row
-/>
+const table = useMantineReactTable({
+  columns,
+  data,
+  enableExpanding: true,
+  paginateExpandedRows: false, //expanded rows will be on the same page as their parent row
+});
 ```
 
 ### Expanded Leaf Row Filtering Behavior
@@ -117,45 +117,45 @@ If you are using the [filtering features](/docs/guides/column-filtering) alongsi
 
 #### Filter From Leaf Rows
 
-By default, filtering is done from parent rows down (so if a parent row is filtered out, all of its children will be filtered out as well). Setting the `filterFromLeafRows` prop to `true` will cause filtering to be done from leaf rows up (which means parent rows will be kept so long as one of their child, or grand-child, etc. rows pass the filtering).
+By default, filtering is done from parent rows down (so if a parent row is filtered out, all of its children will be filtered out as well). Setting the `filterFromLeafRows` table option to `true` will cause filtering to be done from leaf rows up (which means parent rows will be kept so long as one of their child, or grand-child, etc. rows pass the filtering).
 
 ```jsx
-<MantineReactTable
-  columns={columns}
-  data={data}
-  enableExpanding
-  filterFromLeafRows //search for child rows and preserve parent rows
-/>
+const table = useMantineReactTable({
+  columns,
+  data,
+  enableExpanding: true,
+  filterFromLeafRows: true, //search for child rows and preserve parent rows
+});
 ```
 
 #### Max Leaf Row Filter Depth
 
-By default, filtering is done for all rows (max depth of 100), no matter if they are root level parent rows or the child leaf rows of a parent row. Setting the `maxLeafRowFilterDepth` prop to `0` will cause filtering to only be applied to the root level parent rows, with all sub-rows remaining unfiltered. Similarly, setting this option to 1 will cause filtering to only be applied to child leaf rows 1 level deep, and so on.
+By default, filtering is done for all rows (max depth of 100), no matter if they are root level parent rows or the child leaf rows of a parent row. Setting the `maxLeafRowFilterDepth` table option to `0` will cause filtering to only be applied to the root level parent rows, with all sub-rows remaining unfiltered. Similarly, setting this option to 1 will cause filtering to only be applied to child leaf rows 1 level deep, and so on.
 
 This is useful for situations where you want a row's entire child hierarchy to be visible, regardless of the applied filter.
 
 ```jsx
-<MantineReactTable
-  columns={columns}
-  data={data}
-  enableExpanding
-  maxLeafRowFilterDepth={0} //When filtering root rows, keep all child rows of the passing parent rows
-/>
+const table = useMantineReactTable({
+  columns,
+  data,
+  enableExpanding: true,
+  maxLeafRowFilterDepth: 0, //When filtering root rows, keep all child rows of the passing parent rows
+});
 ```
 
 ### Expand All Rows By Default
 
-You can manage the initial state of the expanded rows with the `expanded` state option in either the `initialState` or `state` props.
+You can manage the initial state of the expanded rows with the `expanded` state option in either the `initialState` or `state` table options.
 
 For example, you may want all rows to be expanded by default. To do this, you can simply set the `expanded` state option to `true`.
 
 ```jsx
-<MantineReactTable
-  columns={columns}
-  data={data}
-  enableExpanding
-  initialState={{ expanded: true }} //all rows expanded by default
-/>
+const table = useMantineReactTable({
+  columns,
+  data,
+  enableExpanding: true,
+  initialState: { expanded: true }, //all rows expanded by default
+});
 ```
 
 <ExpandedExample />
diff --git a/apps/mantine-react-table-docs/pages/docs/guides/global-filtering.mdx b/apps/mantine-react-table-docs/pages/docs/guides/global-filtering.mdx
index db94d5597..cdb63bf57 100644
--- a/apps/mantine-react-table-docs/pages/docs/guides/global-filtering.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/guides/global-filtering.mdx
@@ -3,7 +3,6 @@ import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable
 import ColumnOptionsTable from '../../../components/prop-tables/ColumnOptionsTable';
 import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';
 import CustomizeComponentExample from '../../../examples/customize-global-filter-component';
-import RemoteExample from '../../../examples/remote';
 
 <Head>
   <title>
@@ -60,7 +59,7 @@ You can either disable the global filter feature entirely, or disable it for spe
 
 If you simply want to not include a column as one of the columns that the global filter scans through during filtering, you can set the `enableGlobalFilter` option to `false` for that column.
 
-```tsx
+```jsx
 const columns = [
   {
     accessorKey: 'id',
@@ -78,12 +77,12 @@ const columns = [
 
 You can disable the global filtering feature and hide the search icon by setting the `enableGlobalFilter` prop to `false`.
 
-```tsx
-<MantineReactTable
-  columns={columns}
-  data={data}
-  enableGlobalFilter={false} //disable search feature
-/>
+```jsx
+const table = useMantineReactTable({
+  columns,
+  data,
+  enableGlobalFilter: false, //disable search feature
+});
 ```
 
 ### Filter Match Highlighting
@@ -107,11 +106,11 @@ const columns = [
 Filter Match Highlighting can be disabled by setting the `enableFilterMatchHighlighting` prop to `false`.
 
 ```jsx
-<MantineReactTable
-  columns={columns}
-  data={data}
-  enableFilterMatchHighlighting={false}
-/>
+const table = useMantineReactTable({
+  columns,
+  data,
+  enableFilterMatchHighlighting: false,
+});
 ```
 
 ### Client-Side Global Filtering
@@ -123,25 +122,25 @@ Client-side filtering (and global filtering) is enabled by default. This means t
 You can use any of the built-in `filterFns` or any of the custom filter functions that you have defined in the `filterFns` prop, just like you would with the column filters.
 
 ```jsx
-<MantineReactTable
-  columns={columns}
-  data={data}
-  globalFilterFn="contains" //turn off fuzzy matching and use simple contains filter function
-/>
+const table = useMantineReactTable({
+  columns,
+  data,
+  globalFilterFn: 'contains', //turn off fuzzy matching and use simple contains filter function
+});
 ```
 
 or a custom filter function:
 
 ```jsx
-<MantineReactTable
-  columns={columns}
-  data={data}
-  filterFns={{
+const table = useMantineReactTable({
+  columns,
+  data,
+  filterFns: {
     myCustomFilterFn: (row, id, filterValue) =>
       row.getValue(id).startsWith(filterValue),
-  }}
-  globalFilterFn="myCustomFilterFn" //set the global filter function to myCustomFilterFn
-/>
+  },
+  globalFilterFn: 'myCustomFilterFn', //set the global filter function to myCustomFilterFn
+});
 ```
 
 The default global filter function is set to `fuzzy`, which is a filtering algorithm based on the popular `match-sorter` [library from Kent C. Dodds](https://www.npmjs.com/package/match-sorter), though you can change the global filter function by setting the `globalFilterFn` prop.
@@ -155,11 +154,11 @@ The ranked results feature will disable itself automatically if a sort direction
 If you do not want ranked results to be enabled, but you still want fuzzy matching, you can set the `enableGlobalFilterRankedResults` prop to `false`.
 
 ```jsx
-<MantineReactTable
-  columns={columns}
-  data={data}
-  enableGlobalFilterRankedResults={false} //preserve the order of the data when fuzzy match searching
-/>
+const table = useMantineReactTable({
+  columns,
+  data,
+  enableGlobalFilterRankedResults: false, //preserve the order of the data when fuzzy match searching
+});
 ```
 
 ### Global Filter Modes
@@ -167,12 +166,12 @@ If you do not want ranked results to be enabled, but you still want fuzzy matchi
 Similar to the column filter modes, you can enable the user to be able to choose between multiple different filter modes for the global filter with the `enableGlobalFilterModes` prop. You can then customize which filter modes are available in the dropdown by setting the `globalFilterModeOptions` prop, or by rendering your own custom menu items with the `renderGlobalFilterModeMenuItems` prop.
 
 ```jsx
-<MantineReactTable
-  columns={columns}
-  data={data}
-  enableGlobalFilterModes //enable the user to choose between multiple search filter modes
-  globalFilterModeOptions={['fuzzy', 'startsWith']} //only allow the user to choose between fuzzy and startsWith filter modes
-/>
+const table = useMantineReactTable({
+  columns,
+  data,
+  enableGlobalFilterModes: true, //enable the user to choose between multiple search filter modes
+  globalFilterModeOptions: ['fuzzy', 'startsWith'], //only allow the user to choose between fuzzy and startsWith filter modes
+});
 ```
 
 #### Show Search Field by Default
@@ -184,14 +183,14 @@ Also, if you want to show the search text box by default and not hide it behind
 You can customize the position of the global filter (search box) in the top toolbar by setting the `positionGlobalFilter` prop to `left` or `right`. It is shown on the right by default.
 
 ```jsx
-<MantineReactTable
-  columns={columns}
-  data={data}
-  positionGlobalFilter="left" //show the global filter on the left side of the top toolbar
-  initialState={{
+const table = useMantineReactTable({
+  columns,
+  data,
+  positionGlobalFilter: 'left', //show the global filter on the left side of the top toolbar
+  initialState: {
     showGlobalFilter: true, //show the global filter by default
-  }}
-/>
+  },
+});
 ```
 
 ### Customize the Search Text Field
@@ -199,15 +198,15 @@ You can customize the position of the global filter (search box) in the top tool
 You can customize the search text field by passing in props to the `mantineSearchTextInputProps` prop. This is useful if you want to customize the placeholder text, add styles, or any other text field props.
 
 ```jsx
-<MantineReactTable
-  columns={columns}
-  data={data}
-  mantineSearchTextInputProps={{
+const table = useMantineReactTable({
+  columns,
+  data,
+  mantineSearchTextInputProps: {
     placeholder: 'Search all users',
     sx: { minWidth: '300px' },
     variant: 'outlined',
-  }}
-/>
+  },
+});
 ```
 
 <CustomizeComponentExample />
@@ -229,21 +228,19 @@ useEffect(() => {
   };
 }, [globalFilter]);
 
-return (
-  <MantineReactTable
-    columns={columns}
-    data={data} // this will already be filtered on the server
-    manualFiltering //turn off client-side filtering
-    onGlobalFilterChange={setGlobalFilter} //hoist internal global state to your state
-    state={{ globalFilter }} //pass in your own managed globalFilter state
-  />
-);
+const table = useMantineReactTable({
+  columns,
+  data, // this will already be filtered on the server
+  manualFiltering: true, //turn off client-side filtering
+  onGlobalFilterChange: setGlobalFilter, //hoist internal global state to your state
+  state: { globalFilter }, //pass in your own managed globalFilter state
+});
+
+return <MantineReactTable table={table} />;
 ```
 
 > Specifying `manualFiltering` turns off all client-side filtering, and assumes that the `data` you pass to `<MantineReactTable />` is already filtered.
 
-Here is the full Remote Data example showing off server-side **filtering**, pagination, and sorting.
-
-<RemoteExample />
+See the full [Remote Data example](/docs/examples/remote) showing off server-side **filtering**, pagination, and sorting.
 
 View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/features-search-examples)**
diff --git a/apps/mantine-react-table-docs/pages/docs/guides/localization.mdx b/apps/mantine-react-table-docs/pages/docs/guides/localization.mdx
index b023e831c..25b7b2971 100644
--- a/apps/mantine-react-table-docs/pages/docs/guides/localization.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/guides/localization.mdx
@@ -12,7 +12,7 @@ import LocaleExamples from '../../../example-groups/LocaleExamples';
 
 ## Localization (i18n) Guide
 
-Mantine React Table has full support for localization (i18n). Some locales are included by default, but if your language is not yet supported, you can still easily add your own custom translations to the `localization` prop.
+Mantine React Table has full support for localization (i18n). Some locales are included by default, but if your language is not yet supported, you can still easily add your own custom translations to the `localization` table option.
 
 ### Relevant Table Options
 
@@ -34,13 +34,13 @@ Scroll and find your language below to see an example of how to use it.
 
 ### Custom Non-Built-In Translations
 
-If you want to use a language that is not included in the library, you can still easily add your own custom translations to the `localization` prop.
+If you want to use a language that is not included in the library, you can still easily add your own custom translations to the `localization` table option.
 
 ```jsx
-<MantineReactTable
-  columns={columns}
-  data={data}
-  localization={{
+const table = useMantineReactTable({
+  columns,
+  data,
+  localization: {
     actions: 'Ações',
     and: 'e',
     cancel: 'Cancelar',
@@ -51,8 +51,8 @@ If you want to use a language that is not included in the library, you can still
     clearSort: 'Limpar classificações',
     clickToCopy: 'Clique para copiar',
     // ... and many more - see link below for full list of translation keys
-  }}
-/>
+  },
+});
 ```
 
 For a full list of all available translation keys, see [here](https://github.com/KevinVandy/mantine-react-table/blob/main/packages/mantine-react-table/src/locales/en.ts)
diff --git a/apps/mantine-react-table-docs/pages/docs/index.mdx b/apps/mantine-react-table-docs/pages/docs/index.mdx
index 28785dd92..52471bb40 100644
--- a/apps/mantine-react-table-docs/pages/docs/index.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/index.mdx
@@ -1,5 +1,5 @@
 import Head from 'next/head';
-import {TableOfContentsList} from '../../components/navigation/TableOfContentsList';
+import { TableOfContentsList } from '../../components/navigation/TableOfContentsList';
 import { PopularDocs } from '../../components/mdx/PopularDocs';
 import { routes } from '../../components/navigation/routes';
 
diff --git a/apps/mantine-react-table-docs/public/sitemap-0.xml b/apps/mantine-react-table-docs/public/sitemap-0.xml
index b91228427..60222a766 100644
--- a/apps/mantine-react-table-docs/public/sitemap-0.xml
+++ b/apps/mantine-react-table-docs/public/sitemap-0.xml
@@ -1,67 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://www.mantine-react-table.com</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/about</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/changelog</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/api</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/api/cell-instance-apis</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/api/column-instance-apis</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/api/column-options</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/api/row-instance-apis</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/api/state-options</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/api/table-instance-apis</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/api/table-options</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/examples</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/examples/advanced</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/examples/aggregation-and-grouping</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/examples/basic</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/examples/custom-headless</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/examples/data-export</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/examples/editing-crud</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/examples/editing-crud-inline-cell</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/examples/editing-crud-inline-row</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/examples/editing-crud-inline-table</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/examples/infinite-scrolling</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/examples/minimal</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/examples/react-query</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/examples/remote</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/examples/virtualized</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/getting-started</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/getting-started/install</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/getting-started/typescript</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/getting-started/usage</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/aggregation-and-grouping</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/async-loading</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/click-to-copy</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/column-actions-menu</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/column-filtering</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/column-hiding</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/column-ordering-dnd</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/column-pinning</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/column-resizing</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/custom-icons</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/customize-components</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/data-columns</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/density-toggle</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/detail-panel</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/display-columns</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/editing</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/event-listeners</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/expanding-sub-rows</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/full-screen-toggle</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/global-filtering</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/localization</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/memoize-components</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/pagination</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/row-actions</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/row-numbers</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/row-ordering-dnd</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/row-selection</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/sorting</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/state-management</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/sticky-header-footer</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/toolbar-customization</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
-<url><loc>https://www.mantine-react-table.com/docs/guides/virtualization</loc><lastmod>2023-07-17T04:33:06.410Z</lastmod></url>
+<url><loc>https://www.mantine-react-table.com/docs/examples/remote</loc><lastmod>2023-07-18T06:55:33.995Z</lastmod></url>
+<url><loc>https://www.mantine-react-table.com/docs/getting-started/typescript</loc><lastmod>2023-07-18T06:55:33.995Z</lastmod></url>
 </urlset>
\ No newline at end of file
diff --git a/packages/mantine-react-table/README.md b/packages/mantine-react-table/README.md
index a19bae0ab..4947037c2 100644
--- a/packages/mantine-react-table/README.md
+++ b/packages/mantine-react-table/README.md
@@ -2,9 +2,9 @@
 
 View the [Docs Site](https://www.mantine-react-table.com/)
 
-A work in progress fork of [Material React Table](https://www.material-react-table.com)
+A fork of [Material React Table](https://www.material-react-table.com)
 
-Coming soon in early 2023, but you can try out the beta now.
+V1 released July 18, 2023
 
 <a href="https://npmjs.com/package/mantine-react-table" target="_blank">
   <img alt="" src="https://badgen.net/npm/v/mantine-react-table?color=blue" />
diff --git a/packages/mantine-react-table/package.json b/packages/mantine-react-table/package.json
index c6104d11e..573bb764f 100644
--- a/packages/mantine-react-table/package.json
+++ b/packages/mantine-react-table/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.28",
+  "version": "1.0.0",
   "license": "MIT",
   "name": "mantine-react-table",
   "description": "A fully featured Mantine implementation of TanStack React Table V8, written from the ground up in TypeScript.",