@dynostack/react-grid 0.2.0 → 0.3.0

package/README.md

@@ -51,6 +51,8 @@ A single `<DataTable />` component that gives you ag-grid–level functionality
 - [Selection & bulk actions](#selection--bulk-actions)
 - [Expandable rows](#expandable-rows)
 - [Export](#export)
+- [View sheet](#view-sheet)
+- [Delete confirmation](#delete-confirmation)
 - [Custom row actions](#custom-row-actions)
 - [Server-side data](#server-side-data)
 - [API reference](#api-reference)
@@ -610,6 +612,72 @@ Mark a column non-exportable via `meta.exportable: false`.
 
 ---
 
+## View sheet
+
+Click the row action "View" → a right-side `Sheet` slides in showing every visible column as a `{Label}: {value}` card. The user can switch layout density inline (Compact 1 col / Relaxed 2 col / Comfy 3 col).
+
+Works out of the box with no props. Customize via `viewSheet`:
+
+```tsx
+<DataTable
+  viewSheet={{
+    side: "right",                              // or "left"
+    defaultDensity: "relaxed",                  // initial column count
+    hideDensityTabs: true,                      // hide the layout picker
+    fields: ["name", "email", "role"],          // limit / reorder shown columns
+    renderField: ({ column, value, row }) =>    // override how a value renders
+      column.id === "phone" ? <a href={`tel:${value}`}>{String(value)}</a> : null,
+    renderHeader: (row) => <YourCustomHeader row={row} />,
+    labels: {
+      title: (row) => `${row.name} (${row.role})`,
+      description: (row) => `Joined ${row.joinedAt}`,
+      emptyValue: "—",
+      density: { compact: "1 col", relaxed: "2 cols", comfy: "3 cols" },
+    },
+  }}
+  onView={(row) => track("user.view", row)}   // optional side-effect
+/>
+```
+
+Disable the built-in sheet entirely:
+
+```tsx
+<DataTable viewSheet={false} onView={(row) => router.push(`/users/${row.id}`)} />
+```
+
+`onView` fires before the sheet opens, so you can navigate / log / fetch alongside it.
+
+---
+
+## Delete confirmation
+
+Both the row-action "Delete" and the toolbar "Bulk delete" open a confirmation `AlertDialog` by default. The user must confirm before `onDelete` or `onBulkDelete` fires.
+
+```tsx
+<DataTable
+  onDelete={(row) => api.deleteUser(row.id)}
+  onBulkDelete={(rows) => api.bulkDelete(rows.map(r => r.id))}
+  confirmDelete={{
+    title: ({ rows, source }) =>
+      source === "bulk"
+        ? `Delete ${rows.length} users?`
+        : `Delete ${rows[0].name}?`,
+    description: ({ rows }) =>
+      `${rows.length === 1 ? "This user" : "These users"} will be permanently removed. This cannot be undone.`,
+    confirmLabel: "Yes, delete",
+    cancelLabel: "Keep",
+  }}
+/>
+```
+
+Skip the dialog (fire immediately):
+
+```tsx
+<DataTable confirmDelete={false} onDelete={(row) => softDelete(row)} />
+```
+
+---
+
 ## Custom row actions
 
 ```tsx
@@ -731,6 +799,10 @@ operations and only renders the returned page.
 | `density`                 | `"compact" \| "default" \| "comfortable"`                  | `"default"`            | Row density.                                           |
 | `theme`                   | `DataTableTheme`                                           | inherits `:root`       | Per-instance CSS-variable overrides. Accepts flat tokens **or** `{ light, dark }`. |
 | `isolate`                 | `boolean`                                                  | `false`                | Ignore the app's `:root` and render with bundled defaults. |
+| `onView`                  | `(row: TData) => void`                                     | —                      | Side-effect when "View" is clicked. Fires *before* the sheet opens. |
+| `onDelete`                | `(row: TData) => void`                                     | —                      | Single-row delete handler. Fires *after* the confirm modal (or immediately if `confirmDelete={false}`). |
+| `viewSheet`               | `ViewSheetConfig<TData> \| false`                          | enabled                | Configure or disable the built-in View sheet. |
+| `confirmDelete`           | `ConfirmDeleteConfig<TData> \| boolean`                    | `true`                 | Configure or disable the delete confirmation modal (applies to single + bulk). |
 
 `TData` must extend `{ id: string \| number }`.
 
@@ -801,6 +873,43 @@ import {
 } from "@dynostack/react-grid"
 ```
 
+```ts
+// View sheet types
+type ViewSheetDensity = "compact" | "relaxed" | "comfy"
+
+type ViewSheetConfig<TData> = {
+  side?: "right" | "left" | "top" | "bottom"
+  defaultDensity?: ViewSheetDensity
+  hideDensityTabs?: boolean
+  fields?: string[]
+  renderField?: (args: {
+    column: Column<TData, unknown>
+    value: unknown
+    row: TData
+  }) => React.ReactNode
+  renderHeader?: (row: TData) => React.ReactNode
+  labels?: {
+    title?: (row: TData) => React.ReactNode
+    description?: (row: TData) => React.ReactNode
+    emptyValue?: string
+    density?: { compact?: string; relaxed?: string; comfy?: string }
+  }
+}
+
+// Confirm-delete types
+type ConfirmDeleteContext<TData> = {
+  rows: TData[]
+  source: "single" | "bulk"
+}
+
+type ConfirmDeleteConfig<TData> = {
+  title?: (ctx: ConfirmDeleteContext<TData>) => React.ReactNode
+  description?: (ctx: ConfirmDeleteContext<TData>) => React.ReactNode
+  confirmLabel?: string
+  cancelLabel?: string
+}
+```
+
 ---
 
 ## Compatibility