@facetui/react 1.0.0 → 1.0.1
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 +38 -16
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
# FacetUI
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@facetui/react)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
[](./LICENSE.md)
|
|
7
|
+
|
|
3
8
|
**FacetUI: The enterprise-grade, fully accessible React grid that replaces the sortable, filterable, paginated table you'd otherwise rebuild on every project** — headless architecture, conditional row selection, and a real controlled filtering pipeline, all styled natively in Tailwind with zero lock-in. Drop it in for a working table in one line, or drive the raw hook yourself when you need total control — same engine, three levels of abstraction. Built for teams who need WCAG-grade accessibility and server-side data out of the box, not bolted on after a support ticket.
|
|
4
9
|
|
|
5
10
|
A production-ready, fully accessible data table component for React and Next.js. Built with TypeScript, [React Aria Components](https://react-spectrum.adobe.com/react-aria/) for the interactive primitives, [TanStack Table](https://tanstack.com/table) for the state engine, and Tailwind CSS v4 for styling. Follows the headless architecture pattern so every visual detail is customizable without forking the logic.
|
|
@@ -38,27 +43,44 @@ FacetUI is built to eliminate that trade-off — it ships as a complete, enterpr
|
|
|
38
43
|
|
|
39
44
|
## Installation
|
|
40
45
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
**1. Copy the component folder into your project:**
|
|
46
|
+
### 1. Install from npm
|
|
44
47
|
|
|
45
|
-
```
|
|
46
|
-
|
|
48
|
+
```bash
|
|
49
|
+
npm install @facetui/react
|
|
47
50
|
```
|
|
48
51
|
|
|
49
|
-
|
|
52
|
+
Then the peer dependencies (React and ReactDOM you already have):
|
|
50
53
|
|
|
51
54
|
```bash
|
|
52
|
-
npm install react-aria-components
|
|
55
|
+
npm install react-aria-components lucide-react clsx tailwind-merge
|
|
53
56
|
```
|
|
54
57
|
|
|
55
|
-
|
|
58
|
+
`@tanstack/react-table` is a direct dependency and installs automatically.
|
|
59
|
+
|
|
60
|
+
> **Commercial license.** `@facetui/react` is licensed per developer — see [`LICENSE.md`](./LICENSE.md) for terms.
|
|
61
|
+
|
|
62
|
+
### 2. Tailwind CSS v4
|
|
63
|
+
|
|
64
|
+
The utility classes are auto-detected — there is no `content` array to update. You only need the FacetUI **token contract** in a global stylesheet: copy the `:root` / `.dark` blocks and the `@theme inline` mapping from [`src/index.css`](./src/index.css). If your project already uses a [shadcn/ui](https://ui.shadcn.com) **v4** theme, the ~16 tokens (`--background`, `--primary`, `--muted`, `--ring`, …) are identical and already in place.
|
|
65
|
+
|
|
66
|
+
See [`THEMING.md`](./THEMING.md) for the full token reference, dark mode, and building your own theme or presets.
|
|
67
|
+
|
|
68
|
+
> **On Tailwind v3?** Add `"./node_modules/@facetui/react/dist/**/*.js"` to your `content` globs, register the tokens under `theme.extend.colors`, and mind the v3→v4 utility renames (`shadow-xs`, `rounded-xs`, `outline-hidden`). Details in [`THEMING.md`](./THEMING.md).
|
|
69
|
+
|
|
70
|
+
### 3. Next.js App Router
|
|
71
|
+
|
|
72
|
+
Every entry point ships `"use client"` — no extra configuration.
|
|
73
|
+
|
|
74
|
+
---
|
|
56
75
|
|
|
57
|
-
|
|
76
|
+
### Alternative: vendor the source
|
|
58
77
|
|
|
59
|
-
|
|
78
|
+
Licensees who prefer to copy the component into their own tree rather than depend on the package:
|
|
60
79
|
|
|
61
|
-
|
|
80
|
+
1. Copy `src/components/data-table/` into your project.
|
|
81
|
+
2. `npm install react-aria-components @tanstack/react-table lucide-react clsx tailwind-merge`
|
|
82
|
+
3. On Tailwind v3, add `"./src/components/data-table/**/*.{ts,tsx}"` to your `content` globs.
|
|
83
|
+
4. Import from your local path (e.g. `@/components/data-table`) instead of `@facetui/react` — everything below is otherwise identical.
|
|
62
84
|
|
|
63
85
|
---
|
|
64
86
|
|
|
@@ -67,8 +89,8 @@ npm install react-aria-components @tanstack/react-table lucide-react clsx tailwi
|
|
|
67
89
|
### Basic example
|
|
68
90
|
|
|
69
91
|
```tsx
|
|
70
|
-
import { DataTable } from "
|
|
71
|
-
import type { ColumnDef } from "
|
|
92
|
+
import { DataTable } from "@facetui/react";
|
|
93
|
+
import type { ColumnDef } from "@facetui/react";
|
|
72
94
|
|
|
73
95
|
interface User {
|
|
74
96
|
id: string;
|
|
@@ -111,12 +133,12 @@ This gives you: global search, client-side sorting on every column, column visib
|
|
|
111
133
|
"use client";
|
|
112
134
|
|
|
113
135
|
import { useState } from "react";
|
|
114
|
-
import { DataTable } from "
|
|
136
|
+
import { DataTable } from "@facetui/react";
|
|
115
137
|
import type {
|
|
116
138
|
ColumnDef,
|
|
117
139
|
PaginationState,
|
|
118
140
|
SortingState,
|
|
119
|
-
} from "
|
|
141
|
+
} from "@facetui/react";
|
|
120
142
|
|
|
121
143
|
interface Product {
|
|
122
144
|
id: string;
|
|
@@ -309,7 +331,7 @@ When you need a completely custom render layer, bypass all primitives and drive
|
|
|
309
331
|
```tsx
|
|
310
332
|
"use client";
|
|
311
333
|
|
|
312
|
-
import { useDataTable } from "
|
|
334
|
+
import { useDataTable } from "@facetui/react";
|
|
313
335
|
|
|
314
336
|
export function MyCustomTable() {
|
|
315
337
|
const table = useDataTable({ data, columns, enableRowSelection: true });
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@facetui/react",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Production-ready, accessible data table for React and Next.js — built on React Aria Components + TanStack Table + Tailwind CSS.",
|
|
5
5
|
"author": "Cameron Gates (Redbeard Publishing) <contact@redbeard.au> (https://redbeard.au)",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|