@ethanhann/mantine-dataview 0.5.0 → 0.7.0

package/README.md

@@ -426,6 +426,24 @@ col.accessor("revenue", {
 });
 ```
 
+## View mode in cell renderers
+
+Cell renderers can check whether they're rendering in table or card view using `getViewMode`:
+
+```tsx
+import { getViewMode } from "@ethanhann/mantine-dataview";
+
+col.accessor("name", {
+  cell: (ctx) => {
+    const mode = getViewMode(ctx); // "table" | "cards"
+    return mode === "cards" ? <Text>{ctx.getValue()}</Text> : <Anchor>{ctx.getValue()}</Anchor>;
+  },
+});
+```
+
+`getViewMode` accepts a cell context, header context, or table instance. It updates
+automatically when the user toggles the view.
+
 ## CSV export
 
 Export the current page's visible columns as a CSV file:

package/dist/core/getViewMode.d.ts

@@ -0,0 +1,4 @@
+import { CellContext, HeaderContext, Table } from '@tanstack/react-table';
+import { ViewMode } from '../types/state';
+/** Get the current view mode from a cell context. */
+export declare function getViewMode<TData>(ctx: CellContext<TData, unknown> | HeaderContext<TData, unknown> | Table<TData>): ViewMode;

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export type { CardSlotContext, DataViewSlots, EmptySlotContext, ErrorSlotContext
 export { type CardField, type CardLayout, type CardLayoutRole, type ComposeCardOptions, composeCardLayout, resolveColumnLabel, } from './core/cardComposition';
 export { type ColOptions, ColumnBuilder, col } from './core/colBuilder';
 export { type ExportCsvOptions, exportCsv } from './core/exportCsv';
+export { getViewMode } from './core/getViewMode';
 export { useDataView } from './core/useDataView';
 export { type UseDataViewFetcherOptions, useDataViewFetcher, } from './core/useDataViewFetcher';
 export type { CardFieldMeta, CardRole, ColumnAlign, ColumnDataType, ColumnFilterMeta, ColumnFormatOption, CustomFilterComponentProps, DataColumnDef, DateFormatOptions, FilterOption, FilterVariant, NumberFormatOptions, } from './types/column';