Merge pull request #147 from Kuechlin/next

Bug fixes and mantine version update

docs/pages/examples/RowSelectionExample.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@mantine/core';
 import { RowSelectionState } from '@tanstack/react-table';
 import { useState } from 'react';
 import {
@@ -11,55 +12,66 @@ import {
 import { demoData } from '../../demoData';
 
 export default function RowSelectionExample() {
+  const [data, setData] = useState(demoData);
   const [selected, setSelected] = useState<RowSelectionState>({});
+
+  const removeSelected = () => {
+    const next = data.filter((_, i) => !selected[i]);
+    setSelected({});
+    setData(next);
+  };
+
   return (
-    <DataGrid
-      data={demoData}
-      striped
-      highlightOnHover
-      withGlobalFilter
-      withPagination
-      withColumnFilters
-      withSorting
-      withColumnResizing
-      withRowSelection
-      state={{
-        rowSelection: selected,
-      }}
-      onRowSelectionChange={setSelected}
-      columns={[
-        {
-          accessorKey: 'text',
-          header: 'Text that is too long for a Header',
-          filterFn: stringFilterFn,
-          size: 300,
-          cell: highlightFilterValue,
-        },
-        {
-          header: 'Animal',
-          columns: [
-            { accessorKey: 'cat', filterFn: stringFilterFn },
-            {
-              accessorKey: 'fish',
-              filterFn: stringFilterFn,
-            },
-          ],
-        },
-        {
-          accessorKey: 'city',
-          filterFn: stringFilterFn,
-        },
-        { accessorKey: 'value', filterFn: numberFilterFn },
-        {
-          accessorKey: 'date',
-          cell: (cell) => cell.getValue<Date>()?.toLocaleDateString(),
-          filterFn: dateFilterFn,
-        },
-        {
-          accessorKey: 'bool',
-          filterFn: booleanFilterFn,
-        },
-      ]}
-    />
+    <>
+      <Button onClick={removeSelected}>Remove Selected</Button>
+      <DataGrid
+        data={data}
+        striped
+        highlightOnHover
+        withGlobalFilter
+        withPagination
+        withColumnFilters
+        withSorting
+        withColumnResizing
+        withRowSelection
+        state={{
+          rowSelection: selected,
+        }}
+        onRowSelectionChange={setSelected}
+        columns={[
+          {
+            accessorKey: 'text',
+            header: 'Text that is too long for a Header',
+            filterFn: stringFilterFn,
+            size: 300,
+            cell: highlightFilterValue,
+          },
+          {
+            header: 'Animal',
+            columns: [
+              { accessorKey: 'cat', filterFn: stringFilterFn },
+              {
+                accessorKey: 'fish',
+                filterFn: stringFilterFn,
+              },
+            ],
+          },
+          {
+            accessorKey: 'city',
+            filterFn: stringFilterFn,
+          },
+          { accessorKey: 'value', filterFn: numberFilterFn },
+          {
+            accessorKey: 'date',
+            cell: (cell) => cell.getValue<Date>()?.toLocaleDateString(),
+            filterFn: dateFilterFn,
+          },
+          {
+            accessorKey: 'bool',
+            filterFn: booleanFilterFn,
+          },
+        ]}
+      />
+    </>
   );
 }

examples/next-app/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/next-app/README.md

@@ -0,0 +1,38 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/next-app/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;

examples/next-app/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "next-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/server": "^11.10.0",
+    "@faker-js/faker": "^7.6.0",
+    "@mantine/core": "5.6.3",
+    "@mantine/dates": "^5.10.0",
+    "@mantine/hooks": "^5.10.0",
+    "@mantine/next": "^5.10.0",
+    "@next/font": "13.1.2",
+    "@types/node": "18.11.18",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "dayjs": "^1.11.7",
+    "mantine-data-grid": "0.1.1",
+    "next": "13.1.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "4.9.4"
+  }
+}