Skip to content

Commit 3b03223

Browse files
mxkaskemxkaske
authored
chore: minor stuff (#60)
* wip: * chore: update README * wip: * wip: * fix: group hover arrow * fix: textarea field-sizing
1 parent ecbc9ff commit 3b03223

11 files changed

Lines changed: 103 additions & 42 deletions

File tree

‎README.md‎

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,39 @@ A **Table Schema builder**, **BYOS (Bring Your Own Store)** state management, an
44

55
![Data Table with Infinite Scroll](https://data-table.openstatus.dev/assets/data-table-infinite.png)
66

7-
Visit [data-table.openstatus.dev](https://data-table.openstatus.dev) to learn more. Read the [Guide](https://data-table.openstatus.dev/guide) for full documentation.
7+
Visit [data-table.openstatus.dev](https://data-table.openstatus.dev) to learn more. Read the [Docs](https://data-table.openstatus.dev/docs) for full documentation.
8+
9+
## Install
10+
11+
Install blocks via the shadcn registry:
12+
13+
```bash
14+
npx shadcn@latest add https://data-table.openstatus.dev/r/data-table.json
15+
```
16+
17+
| Block | Install URL | What it adds |
18+
| --------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------- |
19+
| `data-table` | `.../r/data-table.json` | Core: table engine, store, 4 filter types, memory adapter |
20+
| `data-table-filter-command` | `.../r/data-table-filter-command.json` | Command palette with history + keyboard shortcuts |
21+
| `data-table-cell` | `.../r/data-table-cell.json` | 8 cell renderers (text, code, badge, boolean, number, status-code, level-indicator, timestamp) |
22+
| `data-table-sheet` | `.../r/data-table-sheet.json` | Row detail side panel |
23+
| `data-table-nuqs` | `.../r/data-table-nuqs.json` | nuqs URL state adapter |
24+
| `data-table-zustand` | `.../r/data-table-zustand.json` | zustand state adapter |
25+
| `data-table-schema` | `.../r/data-table-schema.json` | Declarative schema system with `col.*` factories |
26+
| `data-table-drizzle` | `.../r/data-table-drizzle.json` | Drizzle ORM server-side helpers |
27+
| `data-table-query` | `.../r/data-table-query.json` | React Query infinite query integration |
28+
29+
All URLs use base `https://data-table.openstatus.dev`.
30+
31+
## Agent Skill
32+
33+
Install the agent skill to let Claude Code (or any compatible AI coding tool) set up data-table-filters in your project:
34+
35+
```bash
36+
npx skills add https://github.com/openstatushq/data-table-filters --skill data-table-filters
37+
```
38+
39+
Then just say "add a filterable data table" — the skill detects your stack, installs the right blocks, generates a schema, and wires everything up.
840

941
## Table Schema
1042

@@ -49,6 +81,7 @@ const sheetFields = generateSheetFields<ColumnSchema>(tableSchema.definition);
4981

5082
- [`/default`](https://data-table.openstatus.dev/default) — client-side pagination (nuqs or zustand)
5183
- [`/infinite`](https://data-table.openstatus.dev/infinite) — infinite scroll with server-side filtering, live mode, row details
84+
- [`/drizzle`](https://data-table.openstatus.dev/drizzle) — Drizzle ORM + Supabase PostgreSQL with cursor-based pagination, faceted search, and live data via Vercel cron
5285
- [`/light`](https://data-table.openstatus.dev/light) — OpenStatus Light Viewer (UI for [`vercel-edge-ping`](https://github.com/OpenStatusHQ/vercel-edge-ping))
5386
- [`/builder`](https://data-table.openstatus.dev/builder) — interactive schema builder (paste JSON/CSV, live table preview, export TS)
5487

@@ -60,7 +93,7 @@ A pluggable adapter pattern for filter state management. Three built-in adapters
6093
- **zustand** — client-side state (existing store integration)
6194
- **memory** — ephemeral in-memory state (embedded tables, builder)
6295

63-
Or implement the `StoreAdapter` interface for a custom solution. See the [Guide](https://data-table.openstatus.dev/guide) for details.
96+
Or implement the `StoreAdapter` interface for a custom solution. See the [Docs](https://data-table.openstatus.dev/docs) for details.
6497

6598
## Built With
6699

@@ -71,6 +104,7 @@ Or implement the `StoreAdapter` interface for a custom solution. See the [Guide]
71104
- [cmdk](http://cmdk.paco.me)
72105
- [nuqs](http://nuqs.47ng.com)
73106
- [zustand](https://zustand.docs.pmnd.rs)
107+
- [drizzle-orm](https://orm.drizzle.team)
74108
- [zod](https://zod.dev)
75109
- [superjson](https://github.com/flightcontrolhq/superjson)
76110
- [date-fns](https://date-fns.org)
@@ -79,7 +113,7 @@ Or implement the `StoreAdapter` interface for a custom solution. See the [Guide]
79113

80114
## Getting Started
81115

82-
No environment variable required.
116+
No environment variable required for the default examples. For the Drizzle example, set `DATABASE_URL` to a PostgreSQL connection string.
83117

84118
```bash
85119
pnpm install

‎src/app/(home)/page.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,12 @@ export default function Home() {
3737
</div>
3838
</div>
3939
<div className="px-2.5 py-2">
40-
<p className="font-medium group-hover:underline">
41-
Infinite Data-Table
42-
</p>
40+
<p className="font-medium">Infinite Data-Table</p>
4341
<p className="text-muted-foreground text-sm">
4442
A{" "}
45-
<span className="underline decoration-blue-500 decoration-wavy underline-offset-2">
46-
cooked
43+
<span className="relative inline-block font-medium text-green-700 italic transition-colors group-hover:text-green-50 dark:text-green-400 dark:group-hover:text-green-950">
44+
<span className="absolute inset-0 scale-x-105 -skew-x-12 bg-green-500/10 transition-colors group-hover:bg-green-600 dark:bg-green-500/10 dark:group-hover:bg-green-400"></span>
45+
<span className="relative">cooked&nbsp;</span>
4746
</span>{" "}
4847
infinite scroll data-table with a{" "}
4948
<span className="text-foreground font-medium">server-side</span>{" "}
@@ -76,13 +75,12 @@ export default function Home() {
7675
</div>
7776
</div>
7877
<div className="px-2.5 py-2">
79-
<p className="font-medium group-hover:underline">
80-
Default Data-Table
81-
</p>
78+
<p className="font-medium">Default Data-Table</p>
8279
<p className="text-muted-foreground text-sm">
8380
A{" "}
84-
<span className="underline decoration-yellow-500 decoration-wavy underline-offset-2">
85-
simple
81+
<span className="relative inline-block font-medium text-indigo-700 italic transition-colors group-hover:text-indigo-50 dark:text-indigo-400 dark:group-hover:text-indigo-950">
82+
<span className="absolute inset-0 scale-x-105 -skew-x-12 bg-indigo-500/10 transition-colors group-hover:bg-indigo-600 dark:bg-indigo-500/10 dark:group-hover:bg-indigo-400"></span>
83+
<span className="relative"> simple&nbsp;</span>
8684
</span>{" "}
8785
data-table with a{" "}
8886
<span className="text-foreground font-medium">client-side</span>{" "}
@@ -357,13 +355,15 @@ function Hero() {
357355
.
358356
</h2>
359357
<p className="text-foreground italic sm:text-lg">
360-
It&apos;s not a library. It&apos;s a playbook.{" "}
358+
<span className="mr-2">
359+
It&apos;s not a library. It&apos;s a playbook.{" "}
360+
</span>
361361
<NextLink
362362
href="/docs/introduction"
363-
className="group text-foreground hover:text-background relative ml-2 inline-block font-medium"
363+
className="group text-foreground hover:text-background relative inline-block font-medium"
364364
>
365365
<span className="bg-muted group-hover:bg-foreground absolute inset-0 scale-x-105 -skew-x-12"></span>
366-
<span className="relative">Learn more in the Docs.</span>
366+
<span className="relative">Learn more in the Docs.&nbsp;</span>
367367
</NextLink>
368368
</p>
369369
</div>

‎src/app/builder/builder-client.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ export function BuilderClient() {
287287
{...field}
288288
id={field.name}
289289
className={cn(
290-
"font-mono text-xs",
290+
"field-sizing-fixed font-mono text-xs",
291291
fieldState.invalid && "border-destructive",
292292
)}
293293
rows={7}
@@ -385,7 +385,7 @@ export function BuilderClient() {
385385
id={field.name}
386386
rows={7}
387387
className={cn(
388-
"font-mono text-xs",
388+
"field-sizing-fixed font-mono text-xs",
389389
fieldState.invalid && "border-destructive",
390390
)}
391391
placeholder='{ "columns": [] }'

‎src/app/docs/[slug]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export default async function DocsSectionPage({
8585
className={cn(
8686
"prose prose-lg dark:prose-invert",
8787
"prose-pre:rounded-lg prose-pre:border prose-pre:border-border prose-pre:bg-foreground dark:prose-pre:bg-muted/50",
88-
"prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-border prose-blockquote:bg-muted/50 prose-blockquote:pe-6 prose-blockquote:font-normal prose-blockquote:not-italic",
88+
"prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:border-border! prose-blockquote:border-l-2",
8989
"w-full min-w-0 overflow-x-auto",
9090
"prose-h1:font-semibold prose-h2:font-semibold prose-h3:font-semibold prose-h4:font-semibold prose-h5:font-semibold prose-h6:font-semibold",
9191
)}

‎src/app/light/layout.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,25 +39,25 @@ export default function Layout({ children }: { children: React.ReactNode }) {
3939
function ButtonPile() {
4040
return (
4141
<div className="group/pile relative pt-1.5">
42-
<Button asChild className="group">
42+
<Button asChild className="group gap-0! [&_svg]:shrink!">
4343
<a
4444
href="https://github.com/openstatusHQ/data-table-filters"
4545
target="_blank"
4646
rel="noreferrer"
4747
>
4848
<span className="mr-1">View GitHub Repo</span>
49-
<ArrowRight className="relative mb-px inline h-4 w-0 transition-all group-hover:w-4" />
50-
<ChevronRight className="relative mb-px inline h-4 w-4 transition-all group-hover:w-0" />
49+
<ArrowRight className="relative mb-px inline h-4 w-0! transition-all group-hover:w-4!" />
50+
<ChevronRight className="relative mb-px inline h-4 w-4! transition-all group-hover:w-0!" />
5151
</a>
5252
</Button>
5353
<Button
5454
asChild
55-
className="group absolute top-0 -right-1.5 -z-10 opacity-70 transition-transform group-hover/pile:-translate-x-1.5 group-hover/pile:-translate-y-10 group-hover/pile:opacity-100"
55+
className="group absolute top-0 -right-1.5 -z-10 gap-0! opacity-70 transition-transform group-hover/pile:-translate-x-1.5 group-hover/pile:-translate-y-10 group-hover/pile:opacity-100 [&_svg]:shrink!"
5656
>
5757
<a href="https://light.openstatus.dev" target="_blank" rel="noreferrer">
5858
<span className="mr-1">Explore Light OS</span>
59-
<ArrowRight className="relative mb-px inline h-4 w-0 transition-all group-hover:w-4" />
60-
<ChevronRight className="relative mb-px inline h-4 w-4 transition-all group-hover:w-0" />
59+
<ArrowRight className="relative mb-px inline h-4 w-0! transition-all group-hover:w-4!" />
60+
<ChevronRight className="relative mb-px inline h-4 w-4! transition-all group-hover:w-0!" />
6161
</a>
6262
</Button>
6363
</div>

‎src/components/data-table/data-table-filter-reset-button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export function DataTableFilterResetButton<TData>({
2525
return (
2626
<Button
2727
variant="outline"
28-
className="h-5 rounded-full px-1.5! py-1! font-mono text-[10px] shadow-none"
28+
className="h-5 gap-1 rounded-full px-1.5! py-1! font-mono text-[10px] shadow-none"
2929
onClick={(e) => {
3030
e.stopPropagation();
3131
column?.setFilterValue(undefined);

‎src/components/layout/data-table-layout.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@ export function DataTableLayout({ children }: { children: React.ReactNode }) {
1515
</Button>
1616
{children}
1717
<div className="fixed right-4 bottom-4 z-50">
18-
<Button asChild className="group">
18+
<Button asChild className="group gap-0! [&_svg]:shrink!">
1919
<a
2020
href="https://github.com/openstatusHQ/data-table-filters"
2121
target="_blank"
2222
rel="noreferrer"
2323
>
2424
<span className="mr-1">View GitHub Repo</span>
25-
<ArrowRight className="relative mb-px inline h-4 w-0 transition-all group-hover:w-4" />
26-
<ChevronRight className="relative mb-px inline h-4 w-4 transition-all group-hover:w-0" />
25+
<ArrowRight className="relative mb-px inline h-4 w-0! transition-all group-hover:w-4!" />
26+
<ChevronRight className="relative mb-px inline h-4 w-4! transition-all group-hover:w-0!" />
2727
</a>
2828
</Button>
2929
</div>

‎src/content/docs/00-introduction.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ _**It’s not a library. It’s a playbook.**_
1616

1717
Build production-grade data tables for large datasets — with proven patterns you can copy into your codebase.
1818

19+
Install the [agent skill](/docs/quick-start#agent-skill) and let it handle the rest.
20+
1921
> This is a **work in progress** — our goal is to make it the fastest way to spin up a data-table view for logs and beyond. Questions, ideas, or feedback? [Open an issue on GitHub](https://github.com/openstatusHQ/data-table-filters/issues).
2022
2123
![data-table with some filters and activated live mode](/assets/docs/data-table.png)

‎src/content/docs/01-quick-start.mdx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,30 +12,30 @@ faq:
1212

1313
# Quick Start
1414

15-
## Install
16-
17-
Start by installing the core `data-table` block — it includes the table engine, memory store adapter, and all 4 filter types:
18-
19-
```bash
20-
npx shadcn@latest add https://data-table.openstatus.dev/r/data-table.json
21-
```
22-
23-
Then add any extension block from the [registry](#blocks) below.
24-
2515
## Agent Skill
2616

2717
Install the skill and let your AI agent handle the setup:
2818

2919
```bash
30-
npx skills add https://github.com/openstatushq/data-table-filters/skills
20+
npx skills add https://github.com/openstatushq/data-table-filters --skill data-table-filters
3121
```
3222

33-
Then prompt your agent:
23+
Let the agent handle the rest:
3424

3525
> Add a data table with filters to my project
3626
3727
It detects your stack, installs the right blocks, and wires them up.
3828

29+
## Install Components
30+
31+
Start by installing the core `data-table` block — it includes the table engine, memory store adapter, and all 4 filter types:
32+
33+
```bash
34+
npx shadcn@latest add https://data-table.openstatus.dev/r/data-table.json
35+
```
36+
37+
Then add any extension block from the [registry](#blocks) below.
38+
3939
## Blocks
4040

4141
The following blocks can be installed via shadcn CLI.

‎src/lib/mdx/mdx-remote.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Link } from "@/components/custom/link";
12
import { MDXRemote } from "next-mdx-remote/rsc";
23
import React from "react";
34
import rehypePrettyCode from "rehype-pretty-code";
@@ -47,14 +48,20 @@ const components = {
4748
h4: createHeading(4),
4849
h5: createHeading(5),
4950
h6: createHeading(6),
51+
a: Link,
5052
table: Table,
5153
img: CustomImage,
5254
pre: Pre,
5355
};
5456

5557
/** @type {import('rehype-pretty-code').Options} */
56-
const prettyCodeOptions = {
58+
const prettyCodeOptions: import("rehype-pretty-code").Options = {
5759
keepBackground: false,
60+
theme: {
61+
light: "github-light-high-contrast",
62+
dark: "github-dark-high-contrast",
63+
},
64+
defaultLang: "plaintext",
5865
};
5966

6067
export function Mdx({ source }: { source: string }) {

0 commit comments

Comments
 (0)