@coldsmirk/ledger-mantine 0.1.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.
- package/README.md +49 -0
- package/dist/index.cjs +7338 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +1189 -0
- package/dist/index.d.ts +1189 -0
- package/dist/index.js +7295 -0
- package/dist/index.js.map +1 -0
- package/dist/labels-ChBqD1II.d.cts +107 -0
- package/dist/labels-ChBqD1II.d.ts +107 -0
- package/dist/locales.cjs +55 -0
- package/dist/locales.cjs.map +1 -0
- package/dist/locales.d.cts +7 -0
- package/dist/locales.d.ts +7 -0
- package/dist/locales.js +54 -0
- package/dist/locales.js.map +1 -0
- package/dist/styles.css +904 -0
- package/package.json +95 -0
package/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# @coldsmirk/ledger-mantine
|
|
2
|
+
|
|
3
|
+
A Mantine-native `<DataTable>` built on [TanStack Table](https://tanstack.com/table) and [TanStack Virtual](https://tanstack.com/virtual): sorting, filtering, pagination, row selection, column pinning/resizing/visibility, master–detail expansion, inline cell editing, and adaptive row virtualization — rendered as a real `<table>` with Mantine's table styling.
|
|
4
|
+
|
|
5
|
+
> **Status: implemented and pre-release.** The component, documentation, tests, build, and package validation gates are in place. The package has not been published to npm yet.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @coldsmirk/ledger-mantine @mantine/core @mantine/dates @mantine/hooks dayjs react react-dom
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Import Mantine's styles and ledger's layered stylesheet once at the application entry point:
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import "@mantine/core/styles.css";
|
|
17
|
+
import "@mantine/dates/styles.css";
|
|
18
|
+
import "@coldsmirk/ledger-mantine/styles.css";
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Peer dependencies: `@mantine/core`, `@mantine/dates`, and `@mantine/hooks` `^9`; `react` and `react-dom` `^19.2`; and `dayjs` as required by `@mantine/dates`.
|
|
22
|
+
|
|
23
|
+
## First table
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { createColumnHelper, DataTable } from "@coldsmirk/ledger-mantine";
|
|
27
|
+
|
|
28
|
+
interface Person {
|
|
29
|
+
id: string;
|
|
30
|
+
name: string;
|
|
31
|
+
email: string;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const column = createColumnHelper<Person>();
|
|
35
|
+
const columns = [
|
|
36
|
+
column.accessor("name", { header: "Name" }),
|
|
37
|
+
column.accessor("email", { header: "Email", meta: { truncate: true } })
|
|
38
|
+
];
|
|
39
|
+
|
|
40
|
+
export function PeopleTable({ people }: { people: Person[] }) {
|
|
41
|
+
return <DataTable columns={columns} data={people} getRowId={person => person.id} withTableBorder />;
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Design in one sentence
|
|
46
|
+
|
|
47
|
+
The behavior layer speaks TanStack's language (raw `ColumnDef`, verbatim state shapes, `enable*` switches), while the presentation layer speaks Mantine's (forwarded `Table` style props, `BoxProps` sizing, Styles API).
|
|
48
|
+
|
|
49
|
+
See the repository's [getting-started guide](https://github.com/coldsmirk/ledger/blob/main/docs/getting-started.md), [feature guides](https://github.com/coldsmirk/ledger/tree/main/docs), and [complete API reference](https://github.com/coldsmirk/ledger/blob/main/docs/api.md).
|