@ethanhann/mantine-dataview 0.2.0 → 0.4.0

package/README.md

@@ -18,13 +18,16 @@ Built on [Mantine](https://mantine.dev) v9 and [TanStack Table](https://tanstack
 - Column data types (`text`, `number`, `currency`, `date`, `boolean`) with automatic Intl-based formatting.
 - Seven filter variants with smart controls: `SegmentedControl` for booleans, `RangeSlider` for bounded numbers,
   `DatePickerInput` for dates.
-- Custom filter components — bring your own UI per column.
+- Custom filter components. Bring your own UI per column.
 - Column pinning (left/right) with sticky positioning.
 - CSV export with optional formatted output.
 - Router-agnostic URL state sync with a default History-API adapter.
 - Cross-page row selection + a shared bulk-action bar.
 - Column-meta card composition (`title`/`subtitle`/`media`/`badge`/`meta`) + a `renderCard` escape hatch.
 - Responsive: force-to-cards below a breakpoint, filters collapse to a bottom drawer on mobile.
+- Faceted search with server-provided counts on filter options and range buckets with dynamic totals.
+- External parameters (`params`) for scope selectors, toggles, and other non-column filters.
+- Controls automatically disabled while data is loading (opt-out with `disableWhileLoading`).
 - Loading / empty / filtered-empty / error states, consistent across both views.
 - Dark mode support via Mantine's color scheme system.
 - Strongly typed end to end; ships its own `.d.ts`. No icon dependency.
@@ -58,7 +61,7 @@ The easiest path is `useDataViewFetcher`, which owns the fetch lifecycle for you
 
 ```tsx
 import {
-    DataView,
+    DataViewer,
     useDataViewFetcher,
     createColumnHelper,
     type DataColumnDef,
@@ -101,11 +104,11 @@ function Users() {
         },
     });
 
-    return <DataView view={view}/>;
+    return <DataViewer view={view}/>;
 }
 ```
 
-`<DataView view={view} />` renders the toolbar, the active presentation, and pagination.
+`<DataViewer view={view} />` renders the toolbar, the active presentation, and pagination.
 
 ## Column builder
 
@@ -153,12 +156,12 @@ or object to merge), `format`, `align`, `cell`, `enableSorting`.
 Compose your own layout by passing children:
 
 ```tsx
-<DataView view={view}>
-    <DataView.Toolbar/>
-    <DataView.BulkActions/>
-    <DataView.Body/>
-    <DataView.Pagination/>
-</DataView>
+<DataViewer view={view}>
+    <DataViewer.Toolbar/>
+    <DataViewer.BulkActions/>
+    <DataViewer.Body/>
+    <DataViewer.Pagination/>
+</DataViewer>
 ```
 
 Or use the standalone components directly for full control:
@@ -169,10 +172,54 @@ Or use the standalone components directly for full control:
 <DataPagination view={view}/>
 ```
 
+### Toolbar sections
+
+Inject controls into the toolbar without rebuilding it from scratch using `leftSection`
+and `rightSection`:
+
+```tsx
+<DataViewer.Toolbar
+  leftSection={<Text fw={600}>Users</Text>}
+  rightSection={
+    <Group gap="xs">
+      <Button size="xs" onClick={() => view.exportCsv()}>Export</Button>
+      <Button size="xs" onClick={() => view.refetch()}>Refresh</Button>
+    </Group>
+  }
+/>
+```
+
+- `leftSection` renders before the search input (start of the left group).
+- `rightSection` renders after the view switcher (end of the right group).
+
+Both sections are disabled during loading along with the other toolbar controls.
+
+### View switcher
+
+The `ViewSwitcher` is exported for standalone use with customizable labels:
+
+```tsx
+import { ViewSwitcher } from "@ethanhann/mantine-dataview";
+
+// Default
+<ViewSwitcher view={view} />
+
+// Custom labels (text or icons)
+<ViewSwitcher view={view} tableLabel="List" cardsLabel="Grid" />
+<ViewSwitcher view={view} tableLabel={<IconList />} cardsLabel={<IconGrid />} />
+```
+
+Or drive the view programmatically:
+
+```tsx
+view.setView("cards"); // switch to cards
+view.view;             // current view: "table" | "cards"
+```
+
 ## Controlled (bring your own data layer)
 
-`useDataViewFetcher` is a thin convenience wrapper. The core, `useDataView`, is fully controlled —
-you supply `rows`/`rowCount`/`status` and respond to `onRequestChange`:
+`useDataViewFetcher` is a thin convenience wrapper. The core, `useDataView`, is fully controlled.
+You supply `rows`/`rowCount`/`status` and respond to `onRequestChange`:
 
 ```tsx
 const [resp, setResp] = useState({rows: [], rowCount: 0});
@@ -198,21 +245,50 @@ const view = useDataView<User>({
 
 The request is emitted immediately for pagination/sorting and debounced for search/filters.
 
+### External parameters
+
+Pass arbitrary parameters that aren't tied to a column. They're included in every
+`DataViewRequest`, trigger a refetch when they change, and reset pagination to page 1:
+
+```tsx
+const [tenantId, setTenantId] = useState("acme");
+const [showArchived, setShowArchived] = useState(false);
+
+const view = useDataViewFetcher<User>({
+    columns,
+    getRowId,
+    fetcher: async (request) => {
+        // request.params = { tenantId: "acme", showArchived: false }
+        const res = await api.list(request);
+        return {rows: res.items, rowCount: res.total};
+    },
+    params: {tenantId, showArchived},
+});
+
+// Render your own controls...
+<Select data={tenants} value={tenantId} onChange={setTenantId}/>
+<Switch checked={showArchived} onChange={(e) => setShowArchived(e.currentTarget.checked)}/>
+```
+
+Values are typed as `FilterParam` (`string | number | boolean | null | string[] | number[]`).
+
 ### Refetching on external changes
 
-When state outside the dataview (e.g. a tenant selector, date range from another component)
-should trigger a refetch, pass it in `deps`:
+For cases where external state affects the fetcher but isn't a named parameter (e.g. it's
+baked into the closure), use `deps` to trigger a refetch:
 
 ```tsx
 const view = useDataViewFetcher<User>({
     columns,
     getRowId,
     fetcher,
-    deps: [selectedTenantId, externalDateRange],
+    deps: [selectedTenantId],
 });
 ```
 
 When any value in `deps` changes, the current request is re-emitted to the fetcher.
+Prefer `params` when the server needs to see the values; use `deps` when they're already
+in the fetcher closure.
 
 ### Manual refresh
 
@@ -230,7 +306,7 @@ error retry button uses.
 Set `dataType` on a column's meta to enable automatic value formatting. When no explicit
 `cell` renderer is provided, the library formats values using `Intl.NumberFormat` or
 `Intl.DateTimeFormat` based on the data type. Raw values are preserved for server requests,
-sorting, and filtering — formatting is display-only.
+sorting, and filtering. Formatting is display-only.
 
 ```tsx
 col.accessor("price", {
@@ -254,9 +330,9 @@ col.accessor("createdAt", {
 
 ### Format overrides (three levels)
 
-1. **Library defaults** — built-in formatters per data type (above).
-2. **Table-scoped** — `formatDefaults` on the hook options, keyed by data type.
-3. **Column-scoped** — `format` on `ColumnMeta`, overrides everything for that column.
+1. **Library defaults**, the built-in formatters per data type (above).
+2. **Table-scoped**, `formatDefaults` on the hook options, keyed by data type.
+3. **Column-scoped**, `format` on `ColumnMeta`, overrides everything for that column.
 
 ```tsx
 const view = useDataViewFetcher({
@@ -315,7 +391,7 @@ col.accessor("avatar", {header: "Avatar", enableSorting: false});
 
 ## Custom headers
 
-Column headers support the same render function pattern as cells — pass a component or
+Column headers support the same render function pattern as cells. Pass a component or
 function to the `header` property:
 
 ```tsx
@@ -399,7 +475,7 @@ Define filters declaratively on column meta. Seven variants are built in:
 | `dateRange`   | `DatePickerInput` (range)           | Two-date calendar picker        |
 
 ```tsx
-// Boolean — renders as a segmented control
+// Boolean, renders as a segmented control
 meta: {
     filter: {
         variant: "boolean"
@@ -465,19 +541,19 @@ col.accessor("location", {
 ```tsx
 import {FilterControl} from "@ethanhann/mantine-dataview";
 
-<DataView view={view}>
+<DataViewer view={view}>
     {view.table.getColumn("inStock") && (
         <FilterControl column={view.table.getColumn("inStock")!}/>
     )}
-    <DataView.Toolbar/>
-    <DataView.Body/>
-    <DataView.Pagination/>
-</DataView>
+    <DataViewer.Toolbar/>
+    <DataViewer.Body/>
+    <DataViewer.Pagination/>
+</DataViewer>
 ```
 
 ### Programmatic filter control
 
-Reset all filters or clear a specific column from anywhere — no need to be inside the toolbar:
+Reset all filters or clear a specific column from anywhere, no need to be inside the toolbar:
 
 ```tsx
 // Reset all filters
@@ -494,6 +570,73 @@ Reset all filters or clear a specific column from anywhere — no need to be ins
 - **Mobile** (below `sm` breakpoint): always collapsed into a bottom drawer.
 - A "Reset filters" button appears automatically when any filter is active.
 
+## Faceted search
+
+When the server returns `facets` in the response, filter controls automatically adapt to show
+dynamic counts, disable zero-result options, and render clickable range buckets.
+
+### Server response with facets
+
+```tsx
+fetcher: async (request) => {
+  const res = await api.list(request);
+  return {
+    rows: res.items,
+    rowCount: res.total,
+    facets: {
+      size: {
+        type: "values",
+        values: [
+          { value: "S", label: "Small", count: 12 },
+          { value: "M", label: "Medium", count: 34 },
+          { value: "L", label: "Large", count: 0 },
+        ],
+      },
+      price: {
+        type: "ranges",
+        ranges: [
+          { label: "Under $25", from: 0, to: 25, count: 15 },
+          { label: "$25-$50", from: 25, to: 50, count: 28 },
+          { label: "$50+", from: 50, to: 999, count: 7 },
+        ],
+        min: 5,
+        max: 249,
+      },
+    },
+  };
+};
+```
+
+### How controls adapt
+
+| Filter type | Without facets | With value facets | With range facets |
+|------------|---------------|-------------------|-------------------|
+| Select | Static options | Options with counts, zero-count dimmed | - |
+| Boolean | All / Yes / No | All / Yes (12) / No (3) | - |
+| Number range | Slider or inputs | Slider (bounds from facet) | Clickable range buckets + slider |
+| Date range | Date picker | Date picker | Clickable range buckets + picker |
+
+Facets are optional and backward compatible. Facet data updates on every fetch, creating the
+classic faceted search loop where filtering one dimension updates counts on all others.
+
+### Facet types
+
+```ts
+// Discrete values - for select, multiselect, boolean filters
+type ValueFacet = {
+  type: "values";
+  values: { value: string; label?: string; count: number }[];
+};
+
+// Bucketed ranges - for numberRange, dateRange filters
+type RangeFacet = {
+  type: "ranges";
+  ranges: { label: string; from: number | string; to: number | string; count: number }[];
+  min?: number | string;
+  max?: number | string;
+};
+```
+
 ## Card composition
 
 In card view, each visible column is placed by its `meta.card.role`:
@@ -515,7 +658,7 @@ role group, columns are ordered by `meta.card.order`.
 For full control over card content, use `renderCard`:
 
 ```tsx
-<DataView
+<DataViewer
     view={view}
     renderCard={({data, selected, toggleSelected}) => (
         <Card withBorder padding="md" onClick={toggleSelected}>
@@ -530,7 +673,7 @@ For full control over card content, use `renderCard`:
 To keep the default composition but wrap it in a custom card shell, use the `Card` slot:
 
 ```tsx
-<DataView
+<DataViewer
     view={view}
     slots={{
         Card: ({data, selected, children}) => (
@@ -551,7 +694,7 @@ To keep the default composition but wrap it in a custom card shell, use the `Car
 Provide a `BulkActions` slot to add actions when rows are selected:
 
 ```tsx
-<DataView
+<DataViewer
     view={view}
     slots={{
         BulkActions: (selection) => (
@@ -578,7 +721,7 @@ The `selection` object provides `count`, `ids` (all selected row IDs across page
 Override loading, empty, and error states:
 
 ```tsx
-<DataView
+<DataViewer
     view={view}
     slots={{
         Empty: () => <Text>No users found.</Text>,
@@ -594,7 +737,7 @@ Override loading, empty, and error states:
 />
 ```
 
-A filtered-empty state is handled automatically — it shows a "clear filters" action so
+A filtered-empty state is handled automatically. It shows a "clear filters" action so
 users can reset without manually removing each filter.
 
 ## URL state sync
@@ -690,7 +833,7 @@ const view = useDataViewFetcher<User>({
     responsive: {forceCardsBelow: "sm", lockSwitcherOnMobile: true},
 });
 
-<DataView view={view} lockSwitcherOnMobile/>;
+<DataViewer view={view} lockSwitcherOnMobile/>;
 ```
 
 When `forceCardsBelow` is set and the viewport is below that breakpoint:
@@ -700,23 +843,56 @@ When `forceCardsBelow` is set and the viewport is below that breakpoint:
 - The view switcher is disabled (or hidden entirely with `lockSwitcherOnMobile`).
 - Filters always open in a bottom drawer on mobile.
 
+## Loading behavior
+
+By default, filter controls, sort controls, and column visibility/pinning menus are disabled
+while data is loading. Sort headers in the table also become non-interactive, with a dimmed
+appearance showing the current sort state. The search input stays enabled so users can keep
+typing during debounced search.
+
+Opt out per component:
+
+```tsx
+<DataTable view={view} disableWhileLoading={false} />
+<DataToolbar view={view} disableWhileLoading={false} />
+```
+
+### Animated row transitions
+
+Instead of skeleton loading, rows can animate in and out with CSS transitions. New rows
+fade and slide in, removed rows fade out, and unchanged rows stay in place:
+
+```tsx
+<DataViewer view={view} animateRows />
+```
+
+When `animateRows` is enabled:
+- Previous rows stay visible while new data loads (no skeleton flash).
+- New rows enter with a slide-down fade-in animation (200ms).
+- Removed rows fade out (150ms) before being removed from the DOM.
+- Works in both table and card views.
+
+This is opt-in. The default behavior (skeleton loading) is unchanged.
+
 ## API overview
 
 | Export                                                               | Purpose                                       |
 |----------------------------------------------------------------------|-----------------------------------------------|
-| `useDataView`                                                        | Headless core — owns all feature state        |
+| `useDataView`                                                        | Headless core, owns all feature state         |
 | `useDataViewFetcher`                                                 | Convenience wrapper that manages the fetch    |
-| `DataView` (+ `.Toolbar` / `.BulkActions` / `.Body` / `.Pagination`) | Orchestrator + compound parts                 |
+| `DataViewer` (+ `.Toolbar` / `.BulkActions` / `.Body` / `.Pagination`) | Orchestrator + compound parts                 |
 | `DataTable`, `DataCards`                                             | The two presentations (usable standalone)     |
 | `DataToolbar`, `DataPagination`, `DataBulkActions`                   | Standalone affordances                        |
 | `FilterControl`                                                      | Individual filter control (place anywhere)    |
+| `ViewSwitcher`                                                       | Table/Cards toggle (customizable labels)      |
 | `exportCsv`                                                          | Standalone CSV export utility                 |
+| `col`                                                                | Fluent column builder factory                 |
 | `createColumnHelper`, `composeCardLayout`, `resolveColumnLabel`      | Column helpers                                |
 | `@ethanhann/mantine-dataview/url`                                    | `windowHistoryAdapter` + serializer utilities |
 
 ### Customization slots
 
-Passed via the `slots` prop on `DataView` or the presentation components:
+Passed via the `slots` prop on `DataViewer` or the presentation components:
 
 | Slot           | Receives                            | Purpose                    |
 |----------------|-------------------------------------|----------------------------|
@@ -730,20 +906,20 @@ Passed via the `slots` prop on `DataView` or the presentation components:
 
 ## Known issues
 
-### `DataView` name shadows the JS global
+### `DataViewer` name shadows the JS global
 
-The `DataView` component shares its name with the JavaScript `DataView` global (typed arrays).
+The `DataViewer` component shares its name with the JavaScript `DataViewer` global (typed arrays).
 Linters like Biome's `noShadowRestrictedNames` will flag the import. Suppress it with:
 
 ```tsx
 // biome-ignore lint/suspicious/noShadowRestrictedNames: component name
-import {DataView} from "@ethanhann/mantine-dataview";
+import {DataViewer} from "@ethanhann/mantine-dataview";
 ```
 
 Or import with an alias:
 
 ```tsx
-import {DataView as MantineDataView} from "@ethanhann/mantine-dataview";
+import {DataViewer as MantineDataView} from "@ethanhann/mantine-dataview";
 ```
 
 ## Development

package/dist/components/DataCards/DataCards.d.ts

@@ -20,5 +20,7 @@ export interface DataCardsProps<TData> extends Omit<SimpleGridProps, "children">
     enableSelection?: boolean;
     /** Skeleton cards shown while loading. It defaults to the current page size, capped at 6. */
     loadingCardCount?: number;
+    /** Animate card enter/exit instead of showing skeletons. Default: false. */
+    animateRows?: boolean;
 }
-export declare function DataCards<TData>({ view, slots, renderCard, fallbackRole, enableSelection, loadingCardCount, cols, ...gridProps }: DataCardsProps<TData>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export declare function DataCards<TData>({ view, slots, renderCard, fallbackRole, enableSelection, loadingCardCount, animateRows, cols, ...gridProps }: DataCardsProps<TData>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;

package/dist/components/DataTable/DataTable.d.ts

@@ -9,5 +9,9 @@ export interface DataTableProps<TData> extends Omit<TableProps, "data" | "childr
     enableSelection?: boolean;
     /** Skeleton rows shown while loading. It defaults to the current page size, capped at 8. */
     loadingRowCount?: number;
+    /** Disable sorting interactions while data is loading. Default: true. */
+    disableWhileLoading?: boolean;
+    /** Animate row enter/exit instead of showing skeletons. Default: false. */
+    animateRows?: boolean;
 }
-export declare function DataTable<TData>({ view, slots, enableSelection, loadingRowCount, ...tableProps }: DataTableProps<TData>): import("react").JSX.Element;
+export declare function DataTable<TData>({ view, slots, enableSelection, loadingRowCount, disableWhileLoading, animateRows, ...tableProps }: DataTableProps<TData>): import("react").JSX.Element;

package/dist/components/DataToolbar/DataToolbar.d.ts

@@ -1,4 +1,5 @@
 import { GroupProps } from '@mantine/core';
+import { ReactNode } from 'react';
 import { UseDataViewReturn } from '../../types/options';
 export interface DataToolbarProps<TData> extends Omit<GroupProps, "children"> {
     /** The `useDataView` instance to drive. */
@@ -12,5 +13,11 @@ export interface DataToolbarProps<TData> extends Omit<GroupProps, "children"> {
     showSort?: boolean;
     showVisibility?: boolean;
     showViewSwitcher?: boolean;
+    /** Disable search, filter, and sort controls while data is loading. Default: true. */
+    disableWhileLoading?: boolean;
+    /** Content injected at the start of the left control group (before search). */
+    leftSection?: ReactNode;
+    /** Content injected at the end of the right control group (after view switcher). */
+    rightSection?: ReactNode;
 }
-export declare function DataToolbar<TData>({ view, searchPlaceholder, filterInlineThreshold, lockSwitcherOnMobile, showSearch, showFilters, showSort, showVisibility, showViewSwitcher, ...groupProps }: DataToolbarProps<TData>): import("react").JSX.Element;
+export declare function DataToolbar<TData>({ view, searchPlaceholder, filterInlineThreshold, lockSwitcherOnMobile, showSearch, showFilters, showSort, showVisibility, showViewSwitcher, disableWhileLoading, leftSection, rightSection, ...groupProps }: DataToolbarProps<TData>): import("react").JSX.Element;

package/dist/components/DataToolbar/ViewSwitcher.d.ts

@@ -1,5 +1,11 @@
+import { ReactNode } from 'react';
 import { UseDataViewReturn } from '../../types/options';
-export declare function ViewSwitcher<TData>({ view, lockSwitcherOnMobile, }: {
+export interface ViewSwitcherProps<TData> {
     view: UseDataViewReturn<TData>;
     lockSwitcherOnMobile?: boolean;
-}): import("react").JSX.Element | null;
+    /** Custom label for the table option. Default: "Table". */
+    tableLabel?: ReactNode;
+    /** Custom label for the cards option. Default: "Cards". */
+    cardsLabel?: ReactNode;
+}
+export declare function ViewSwitcher<TData>({ view, lockSwitcherOnMobile, tableLabel, cardsLabel, }: ViewSwitcherProps<TData>): import("react").JSX.Element | null;

package/dist/components/DataToolbar/index.d.ts

@@ -1,2 +1,3 @@
 export { DataToolbar, type DataToolbarProps } from './DataToolbar';
 export { FilterControl } from './FilterControl';
+export { ViewSwitcher, type ViewSwitcherProps } from './ViewSwitcher';

package/dist/components/{DataView/DataView.d.ts → DataViewer/DataViewer.d.ts}

@@ -7,30 +7,32 @@ import { DataPaginationProps } from '../DataPagination';
 import { DataTableProps } from '../DataTable';
 import { DataToolbarProps } from '../DataToolbar';
 import { DataViewSlots } from '../types';
-export interface DataViewProps<TData> extends Omit<StackProps, "children"> {
+export interface DataViewerProps<TData> extends Omit<StackProps, "children"> {
     /** The `useDataView` instance to project. */
     view: UseDataViewReturn<TData>;
     slots?: DataViewSlots<TData>;
     renderCard?: DataCardsProps<TData>["renderCard"];
     fallbackRole?: DataCardsProps<TData>["fallbackRole"];
     lockSwitcherOnMobile?: boolean;
+    /** Animate row enter/exit instead of showing skeletons. Default: false. */
+    animateRows?: boolean;
     /** Custom composition. It defaults to Toolbar, BulkActions, Body, and Pagination. */
     children?: ReactNode;
 }
-export declare function DataView<TData>({ view, slots, renderCard, fallbackRole, lockSwitcherOnMobile, children, ...stackProps }: DataViewProps<TData>): import("react").JSX.Element;
-export declare namespace DataView {
+export declare function DataViewer<TData>({ view, slots, renderCard, fallbackRole, lockSwitcherOnMobile, animateRows, children, ...stackProps }: DataViewerProps<TData>): import("react").JSX.Element;
+export declare namespace DataViewer {
     var Toolbar: typeof DataViewToolbar;
     var BulkActions: typeof DataViewBulkActions;
     var Body: typeof DataViewBody;
     var Pagination: typeof DataViewPagination;
 }
-export type DataViewToolbarProps<TData> = Omit<DataToolbarProps<TData>, "view">;
-declare function DataViewToolbar<TData>(props: DataViewToolbarProps<TData>): import("react").JSX.Element;
-export interface DataViewBodyProps<TData> {
+export type DataViewerToolbarProps<TData> = Omit<DataToolbarProps<TData>, "view">;
+declare function DataViewToolbar<TData>(props: DataViewerToolbarProps<TData>): import("react").JSX.Element;
+export interface DataViewerBodyProps<TData> {
     tableProps?: Omit<DataTableProps<TData>, "view" | "slots">;
     cardsProps?: Omit<DataCardsProps<TData>, "view" | "slots" | "renderCard" | "fallbackRole">;
 }
-declare function DataViewBody<TData>({ tableProps, cardsProps, }: DataViewBodyProps<TData>): import("react").JSX.Element;
+declare function DataViewBody<TData>({ tableProps, cardsProps, }: DataViewerBodyProps<TData>): import("react").JSX.Element;
 declare function DataViewPagination<TData>(props: Omit<DataPaginationProps<TData>, "view">): import("react").JSX.Element;
 declare function DataViewBulkActions<TData>(props: Omit<DataBulkActionsProps<TData>, "view" | "slots">): import("react").JSX.Element;
 export {};

package/dist/components/{DataView → DataViewer}/context.d.ts

@@ -8,6 +8,7 @@ export interface DataViewContextValue<TData> {
     renderCard?: DataCardsProps<TData>["renderCard"];
     fallbackRole?: ComposeCardOptions["fallbackRole"];
     lockSwitcherOnMobile?: boolean;
+    animateRows?: boolean;
 }
 export declare const DataViewProvider: import('react').Provider<DataViewContextValue<unknown> | null>;
 export declare function useDataViewContext<TData>(): DataViewContextValue<TData>;

package/dist/components/DataViewer/index.d.ts

@@ -0,0 +1,2 @@
+export { type DataViewContextValue, useDataViewContext, } from './context';
+export { DataViewer, type DataViewerBodyProps, type DataViewerProps, type DataViewerToolbarProps, } from './DataViewer';

package/dist/core/useRowTransition.d.ts

@@ -0,0 +1,8 @@
+import { Row } from '@tanstack/react-table';
+export interface RowTransitionResult<TData> {
+    rows: Row<TData>[];
+    entering: Set<string>;
+    /** Increments each time the row set or order changes. Use as a CSS animation key. */
+    generation: number;
+}
+export declare function useRowTransition<TData>(currentRows: Row<TData>[], enabled: boolean): RowTransitionResult<TData>;