@careharmony/mantine-react-table-ng 0.0.0-stage → 4.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Kevin Vandy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,217 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# Mantine React Table NG
+
+`@careharmony/mantine-react-table-ng` is a maintained fork of [Mantine React Table](https://github.com/KevinVandy/mantine-react-table) for **React 19**, **Mantine 9** and the **React Compiler**.
+
+<a href="https://npmjs.com/package/@careharmony/mantine-react-table-ng" target="_blank">
+  <img alt="" src="https://badgen.net/npm/v/@careharmony/mantine-react-table-ng?color=blue" />
+</a>
+<a href="https://github.com/CareHarmony/mantine-react-table/blob/v4/LICENSE" target="_blank">
+  <img alt="" src="https://badgen.net/github/license/CareHarmony/mantine-react-table?color=blue" />
+</a>
+
+## About
+
+### _Quickly Create React Data Tables with Mantine_
+
+### __Built with [Mantine <sup>V9</sup>](https://mantine.dev/) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
+
+## Compatibility
+
+| Package | Supported versions |
+| --- | --- |
+| `react`, `react-dom` | `>=19.2.0` |
+| `@mantine/core`, `@mantine/dates`, `@mantine/hooks` | `>=9.0.0` |
+| `@tabler/icons-react` | `>=2.23.0` |
+| `dayjs` | `>=1.11` |
+| `clsx` | `>=2` |
+
+Use the original [`mantine-react-table`](https://npmjs.com/package/mantine-react-table) for Mantine 7 or React 18.
+
+## Migrating from `mantine-react-table` v2
+
+1. Replace the dependency: `npm uninstall mantine-react-table && npm install @careharmony/mantine-react-table-ng`.
+2. Replace the import specifier `mantine-react-table` with `@careharmony/mantine-react-table-ng`, including `/styles.css` and `/locales/*`.
+3. Remove every `'use no memo'` directive that was added only for Mantine React Table.
+
+Behavior changes from `2.0.0-beta.9`:
+
+- `useMantineReactTable` returns a new `table` reference whenever table state or table options change. Every reference reads the same live table, so an old reference is never stale. An effect that lists `table` as a dependency now runs on those changes.
+- `memoMode: 'rows'` re-renders rows when table state changes. The old comparator ignored row selection.
+- The empty-table placeholder row no longer renders an expand button or a detail panel. Use `renderEmptyRowsFallback` for empty-state content.
+- `globalFilterModeOptions` replaces the default global filter mode list.
+- A column takes part in the global filter when any row has a string or number value. TanStack Table only checked the first row.
+- Pinned columns use logical CSS offsets, so pinning follows `dir="rtl"`.
+
+## React Compiler
+
+Application code that uses this package can be compiled by the [React Compiler](https://react.dev/learn/react-compiler) without `'use no memo'`.
+
+- The `table` reference changes when table state or options change, so compiled components and memoized JSX see the update.
+- Read table data through the table: `table.getState()`, `table.getSelectedRowModel()`, `table.getRowModel()`.
+- The package opts its own source and bundles out of the compiler with `'use no memo'`, because TanStack Table v8 rows, cells and columns are mutable instances.
+- A compiled component that receives only a `row`, `cell` or `column` and stores a method result in `useMemo` keyed on that object can hold a stale value. Pass `table` to that component and include it in the dependency list.
+
+The test suite runs in four modes: no compiler, compiler on consumer code, compiler on library source, and compiler on the built bundle.
+
+```bash
+pnpm test:all
+```
+
+## Learn More
+
+- Join the [Discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions
+- View the [Docs Website](https://www.mantine-react-table.com/)
+- See all [Props, Options, and APIs](https://www.mantine-react-table.com/docs/api)
+
+### Quick Examples
+
+ - [Basic Table](https://www.mantine-react-table.com/docs/examples/basic/) (See Default Features)
+ - [Minimal Table](https://www.mantine-react-table.com/docs/examples/minimal/) (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
+ - [Advanced Table](https://www.mantine-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)
+ - [Aggregation/Grouping](https://www.mantine-react-table.com/docs/examples/aggregation-and-grouping/) (Aggregation features such as Sum, Average, Count, etc.)
+ - [Data Export Table](https://www.mantine-react-table.com/docs/examples/data-export/) (Export to CSV, Excel, etc.)
+ - [Editing CRUD Table](https://www.mantine-react-table.com/docs/examples/editing-crud/) (Create, Edit, and Delete Rows)
+ - [Remote Data](https://www.mantine-react-table.com/docs/examples/remote/) (Server-side Pagination, Sorting, and Filtering)
+ - [React Query](https://www.mantine-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering, simplified)
+ - [Virtualized Rows](https://www.mantine-react-table.com/docs/examples/virtualized/) (10,000 rows at once!)
+ - [Infinite Scrolling](https://www.mantine-react-table.com/docs/examples/infinite-scrolling/) (Fetch data as you scroll)
+ - [Localization (i18n)](https://www.mantine-react-table.com/docs/guides/localization#built-in-locale-examples) (Over a dozen languages built-in)
+
+View additional [storybook examples](https://www.mantine-react-table.dev/)
+
+## Features
+
+_All features can easily be enabled/disabled_
+
+_**Fully Fleshed out [Docs](https://www.mantine-react-table.com/docs/guides#guides) are available for all features**_
+
+- [x] < 44kb gzipped - [Bundlephobia](https://bundlephobia.com/package/mantine-react-table)
+- [x] Advanced TypeScript Generics Support (TypeScript Optional)
+- [x] Aggregation and Grouping (Sum, Average, Count, etc.)
+- [x] Click To Copy Cell Values
+- [x] Column Action Dropdown Menu
+- [x] Column Hiding
+- [x] Column Ordering via Drag'n'Drop
+- [x] Column Pinning (Freeze Columns)
+- [x] Column Resizing
+- [x] Customize Icons
+- [x] Customize Styling of internal Mantine Components
+- [x] Data Editing (4 different editing modes)
+- [x] Density Toggle
+- [x] Detail Panels (Expansion)
+- [x] Filtering (supports client-side and server-side)
+- [x] Filter Match Highlighting
+- [x] Full Screen Mode
+- [x] Global Filtering (Search across all columns, rank by best match)
+- [x] Header Groups & Footers
+- [x] Localization (i18n) support
+- [x] Manage your own state or let the table manage it internally for you
+- [x] Pagination (supports client-side and server-side)
+- [x] Row Actions (Your Custom Action Buttons)
+- [x] Row Numbers
+- [x] Row Ordering via Drag'n'Drop
+- [x] Row Selection (Checkboxes)
+- [x] SSR compatible
+- [x] Sorting (supports client-side and server-side)
+- [x] Theming (Respects your Mantine Theme)
+- [x] Toolbars (Add your own action buttons)
+- [x] Tree Data / Expanding Sub-rows
+- [x] Virtualization (@tanstack/react-virtual)
+
+## Getting Started
+
+### Installation
+
+View the full [Installation Docs](https://www.mantine-react-table.com/docs/getting-started/install)
+
+1. Ensure that you have React 19.2 or later installed
+
+2. Install Peer Dependencies (Mantine V9 and Tabler Icons)
+
+```bash
+npm install @mantine/core @mantine/hooks @mantine/dates @tabler/icons-react dayjs clsx
+```
+
+3. Install @careharmony/mantine-react-table-ng
+
+```bash
+npm install @careharmony/mantine-react-table-ng
+```
+
+> _`@tanstack/react-table`, `@tanstack/react-virtual`, `@tanstack/match-sorter-utils`,_ are internal dependencies, so you do NOT need to install them yourself.
+
+### Usage
+
+> Read the full usage docs [here](https://www.mantine-react-table.com/docs/getting-started/usage/)
+
+```jsx
+import { useMemo, useState, useEffect } from 'react';
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
+import '@careharmony/mantine-react-table-ng/styles.css';
+import { MantineReactTable, useMantineReactTable } from '@careharmony/mantine-react-table-ng';
+
+const data = [
+  {
+    name: 'John',
+    age: 30,
+  },
+  {
+    name: 'Sara',
+    age: 25,
+  },
+]
+
+export default function App() {
+  const columns = useMemo(
+    () => [
+      {
+        accessorKey: 'name', //simple recommended way to define a column
+        header: 'Name',
+        mantineTableHeadCellProps: { style: { color: 'green' } }, //optional custom props
+        Cell: ({ cell }) => <span>{cell.getValue()}</span>, //optional custom cell render
+      },
+      {
+        accessorFn: (row) => row.age, //alternate way
+        id: 'age', //id required if you use accessorFn instead of accessorKey
+        header: 'Age',
+        Header: () => <i>Age</i>, //optional custom header render
+      },
+    ],
+    [],
+  );
+
+  //optionally, you can manage any/all of the table state yourself
+  const [rowSelection, setRowSelection] = useState({});
+
+  useEffect(() => {
+    //do something when the row selection changes
+  }, [rowSelection]);
+
+  const table = useMantineReactTable({
+    columns,
+    data,
+    enableColumnOrdering: true, //enable some features
+    enableRowSelection: true,
+    enablePagination: false, //disable a default feature
+    onRowSelectionChange: setRowSelection, //hoist row selection state to your state
+    state: { rowSelection },
+  });
+  
+  return <MantineReactTable table={table} />;
+}
+```
+
+_Open in [Code Sandbox](https://codesandbox.io/s/simple-mantine-react-table-example-t5c3ji)_
+
+## Contributors
+
+<a href="https://github.com/kevinvandy/mantine-react-table/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=kevinvandy/mantine-react-table" />
+</a>
+
+PRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/KevinVandy/mantine-react-table/discussions) or the [Discord Server](https://discord.gg/5wqyRx6fnm) first if it is a large change!
+
+Read the [Contributing Guide](https://github.com/KevinVandy/mantine-react-table/blob/v2/CONTRIBUTING.md) to learn how to run this project locally.
+
+<!-- Use the FORCE Luke! -->