@zvndev/yable-react 0.6.0 → 0.6.1

package/dist/index.d.cts

@@ -1,11 +1,11 @@
-import { RowData, ColumnDefBase, ColumnDefExtensions, Row, ColumnDef, Table as Table$1, Cell, Header, TableOptions, SortingState, ColumnFiltersState, PaginationState, TableState, Updater, Column, SortDirection, CellContext, ClipboardOptions, CellFlashInfo } from '@zvndev/yable-core';
+import { RowData, ColumnDefBase, ColumnDefExtensions, Row, ColumnDef, Table as Table$1, Cell, Column, Header, TableOptions, SortingState, ColumnFiltersState, PaginationState, TableState, Updater, SortDirection, CellContext, ClipboardOptions, CellFlashInfo } from '@zvndev/yable-core';
 export { AccessorFnColumnDef, AccessorKeyColumnDef, AggregationFn, Cell, CellStatus as CellCommitStatus, CellContext, CellFlashEvent, CellPatch, ClipboardOptions, Column, ColumnDef, ColumnDefBase, ColumnFiltersState, ColumnMeta, ColumnOrderState, ColumnPinningState, ColumnSizingInfoState, ColumnSizingState, CommitError, CommitErrorCells, CommitRecord, CommitResult, CommitsSlice, DisplayColumnDef, EditingState, ExpandedState, FillHandleState, FilterFn, FormulaEngine, FormulaError, FormulaFunction, FormulaState, GroupColumnDef, Header, HeaderContext, HeaderGroup, KeyboardNavigationAction, KeyboardNavigationCell, KeyboardNavigationDirection, KeyboardNavigationState, OnChangeFn, OnCommitFn, PaginationState, PartialLocale, PivotColumn, PivotConfig, PivotEngine, PivotFieldConfig, PivotRow, PivotState, PivotValueConfig, Row, RowData, RowDragEndEvent, RowDragEvent, RowDragState, RowEditCommitEvent, RowEditEvent, RowPinningState, RowReorderEvent, RowSelectionState, SortDirection, SortingFn, SortingState, Table as TableInstance, TableOptions, TableOptionsResolved, TableState, UndoAction, UndoRedoOptions, UndoRedoState, UndoStack, Updater, VisibilityState, YableLocale, aggregationFns, createColumnHelper, createLocale, createUndoRedoIntegration, en, filterFns, formulaFunctions, functionalUpdate, generatePivotColumnDefs, getDefaultLocale, getInitialPivotState, getPivotRowModel, resetLocale, setDefaultLocale, sortingFns } from '@zvndev/yable-core';
 import * as React$1 from 'react';
 import React__default, { CSSProperties, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { RowDragState } from '@zvndev/yable-core/features/rowDragging';
 
-type YableTableVisualConfig = Partial<Pick<TableProps<any>, 'striped' | 'bordered' | 'compact' | 'stickyHeader' | 'theme' | 'direction' | 'ariaLabel' | 'clickableRows' | 'floatingFilters' | 'columnVirtualization' | 'columnVirtualizationOverscan' | 'statusBar' | 'sidebar' | 'sidebarPanels' | 'defaultSidebarPanel'>>;
+type YableTableVisualConfig = Partial<Pick<TableProps<any>, 'striped' | 'bordered' | 'compact' | 'stickyHeader' | 'theme' | 'direction' | 'ariaLabel' | 'clickableRows' | 'floatingFilters' | 'columnVirtualization' | 'columnVirtualizationOverscan' | 'adaptiveLayout' | 'statusBar' | 'sidebar' | 'sidebarPanels' | 'defaultSidebarPanel'>>;
 type YableColumnConfig<TData extends RowData = any, TValue = unknown> = Partial<ColumnDefBase<TData, TValue>> & Partial<ColumnDefExtensions<TData, TValue>>;
 interface YableRowConfig<TData extends RowData = any> {
     className?: string | ((row: Row<TData>) => string | undefined);
@@ -38,6 +38,35 @@ declare function resolveYableProfile<TData extends RowData = any>(config?: Yable
 declare function getYableDefaultColumnDef<TData extends RowData>(profile?: YableTableProfile<TData>): YableColumnConfig<TData> | undefined;
 declare function applyYableConfigToColumns<TData extends RowData>(columns: ColumnDef<TData, any>[], profile?: YableTableProfile<TData>): ColumnDef<TData, any>[];
 
+type AdaptiveTableLayoutMode = 'auto' | 'table' | 'cards';
+interface AdaptiveTableCardContext<TData extends RowData> {
+    table: Table$1<TData>;
+    row: Row<TData>;
+    rowIndex: number;
+    cells: Cell<TData, unknown>[];
+    primaryCell?: Cell<TData, unknown>;
+    secondaryCells: Cell<TData, unknown>[];
+    visibleColumns: Column<TData, unknown>[];
+}
+interface AdaptiveTableLayoutOptions<TData extends RowData> {
+    /**
+     * `auto` switches at the configured container breakpoint, `cards` forces the
+     * adaptive card surface, and `table` keeps the desktop grid surface.
+     */
+    mode?: AdaptiveTableLayoutMode;
+    /** Container width in px where `auto` switches to cards. Default: 720. */
+    breakpoint?: number;
+    /** Column shown as the card title. Defaults to the first visible column. */
+    primaryColumnId?: string;
+    /** Ordered secondary columns. Defaults to all remaining visible columns. */
+    secondaryColumnIds?: string[];
+    /** Columns omitted from the adaptive card surface. */
+    hiddenColumnIds?: string[];
+    /** Caps secondary fields when no explicit `secondaryColumnIds` are provided. Default: 8. */
+    maxSecondaryColumns?: number;
+    /** Fully custom card renderer for product-specific mobile/tablet layouts. */
+    renderCard?: (context: AdaptiveTableCardContext<TData>) => React.ReactNode;
+}
 interface TableProps<TData extends RowData> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     table: Table$1<TData>;
     /** Enable sticky header */
@@ -96,6 +125,8 @@ interface TableProps<TData extends RowData> extends Omit<HTMLAttributes<HTMLDivE
     columnVirtualization?: boolean;
     /** Additional columns rendered beyond the viewport when column virtualization is enabled */
     columnVirtualizationOverscan?: number;
+    /** Render a structural card layout for tablet/mobile while reusing this table instance */
+    adaptiveLayout?: boolean | AdaptiveTableLayoutOptions<TData>;
     /** Accessible label for the grid container. Default: "Data table" */
     ariaLabel?: string;
 }
@@ -582,7 +613,7 @@ interface YableDefaults {
     /** Named config profile used by descendants unless overridden */
     tableProfile?: string;
     /** Default props applied to every `<Table>` in the subtree */
-    tableProps?: Partial<Pick<TableProps<any>, 'striped' | 'bordered' | 'compact' | 'stickyHeader' | 'theme' | 'direction' | 'ariaLabel'>>;
+    tableProps?: Partial<Pick<TableProps<any>, 'striped' | 'bordered' | 'compact' | 'stickyHeader' | 'theme' | 'direction' | 'ariaLabel' | 'adaptiveLayout'>>;
     /** Default column definition merged under every table's own `defaultColumnDef` */
     defaultColumnDef?: Partial<ColumnDefBase<any, unknown>> & Partial<ColumnDefExtensions<any, unknown>>;
 }
@@ -619,7 +650,7 @@ declare function YableProvider({ children, config, tableProfile, defaultColumnDe
     ariaLabel?: string;
 }): react_jsx_runtime.JSX.Element;
 
-declare function Table<TData extends RowData>({ table, stickyHeader: stickyHeaderProp, striped: stripedProp, bordered: borderedProp, compact: compactProp, theme: themeProp, config, configProfile, clickableRows, footer, loading, loadingComponent, loadingText, emptyMessage, emptyComponent, emptyIcon, emptyDetail, renderEmpty, renderLoading, children, className, direction: directionProp, statusBar, statusBarPanels, sidebar, sidebarPanels, defaultSidebarPanel, floatingFilters, columnVirtualization, columnVirtualizationOverscan, ariaLabel: ariaLabelProp, ...rest }: TableProps<TData>): react_jsx_runtime.JSX.Element;
+declare function Table<TData extends RowData>({ table, stickyHeader: stickyHeaderProp, striped: stripedProp, bordered: borderedProp, compact: compactProp, theme: themeProp, config, configProfile, clickableRows, footer, loading, loadingComponent, loadingText, emptyMessage, emptyComponent, emptyIcon, emptyDetail, renderEmpty, renderLoading, children, className, direction: directionProp, statusBar, statusBarPanels, sidebar, sidebarPanels, defaultSidebarPanel, floatingFilters, columnVirtualization, columnVirtualizationOverscan, adaptiveLayout: adaptiveLayoutProp, ariaLabel: ariaLabelProp, ...rest }: TableProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface TableHeaderProps<TData extends RowData> {
     table: Table$1<TData>;
@@ -1335,4 +1366,4 @@ declare function CellText({ children, variant, bold, truncate, size, }: CellText
  */
 declare function mergeEditChanges<TData>(data: TData[], changes: Record<string, Partial<TData>>, getRowId?: (row: TData, index: number) => string): TData[];
 
-export { type ActionItem, type ActionsColumnOptions, type AutoMeasurementsOptions, CellBadge, type CellBadgeProps, CellBoolean, type CellBooleanProps, CellCheckbox, CellCurrency, type CellCurrencyProps, CellDate, CellDatePicker, type CellDateProps, CellErrorBoundary, CellInput, CellLink, type CellLinkProps, type CellMeasureRecipe, type CellMeasurement, CellNumeric, type CellNumericProps, CellProgress, type CellProgressProps, CellRating, type CellRatingProps, CellRow, type CellRowProps, CellSelect, CellStack, type CellStackProps, CellStatus, CellStatusBadge, type CellStatusBadgeProps, type CellStatusProps, CellText, type CellTextProps, CellToggle, CellWithIcon, type CellWithIconProps, ColumnsPanel, ContextMenu, ContextMenuItem, type ContextMenuItemDef, DEFAULT_TEXT_RECIPE, DragHandle, ErrorBoundary, type ExpandColumnOptions, ExpandIcon, FillHandle, type FillHandleDragState, type FillHandleProps, FiltersPanel, FlashCell, FloatingFilter, GlobalFilter, LoadingOverlay, type LoadingOverlayProps, MasterDetail, NoRowsOverlay, type NoRowsOverlayProps, Pagination, PivotConfigPanel, type PivotConfigProps, type PivotFieldItem, type PivotValueItem, PrintLayout, type ResolvedYableProfile, type RowNumberColumnOptions, type SelectColumnOptions, type ServerTableController, type ServerTableFetchArgs, type ServerTableFetchResult, type ServerTableUpdateArgs, SetFilter, Sidebar, SortIndicator, StatusBar, StatusBarPanelComponent, type StatusBarPanelComponentProps, type StatusBarPanelConfig, type StatusBarPanelProps, Table, TableBody, TableCell, type TableCellProps$1 as TableCellProps, TableFooter, TableHeader, type TableHeaderCellProps, type TableProps, TableProvider, type TableRowProps, Tooltip, type TooltipPosition, type TooltipProps, TreeToggle, type UseCellFlashOptions, type UseClipboardOptions, type UseColumnVirtualizationOptions, type UseColumnVirtualizationResult, type UseFillHandleOptions, type UseFillHandleReturn, type UseKeyboardNavigationOptions, type UsePretextMeasurementOptions, type UsePretextMeasurementResult, type UsePrintLayoutOptions, type UseRowAnimationOptions, type UseRowDragOptions, type UseRowDragReturn, type UseServerTableOptions, type UseTableOptions, type UseTablePersistenceOptions, type UseTablePersistenceReturn, type UseTableRowHeightsOptions, type UseThemeOptions, type UseTooltipOptions, type UseVirtualizationOptions, type UseVirtualizationResult, type VirtualColumn, type VirtualRow, type YableCellConfig, type YableCellConfigSet, type YableColumnConfig, type YableColumnConfigSet, type YableConfig, type YableDefaults, YableProvider, type YableRowConfig, type YableTableProfile, type YableTableVisualConfig, actionsColumn, applyYableConfigToColumns, createYableConfig, expandColumn, getMeasureRecipeForCellType, getRegisteredCellTypes, getYableDefaultColumnDef, mergeEditChanges, resolveMeasureRecipe, resolveYableProfile, rowNumberColumn, selectColumn, useAutoMeasurements, useCellFlash, useClipboard, useColumnVirtualization, useContextMenu, useFillHandle, useKeyboardNavigation, usePretextMeasurement, usePrintLayout, useRowAnimation, useRowDrag, useServerTable, useTable, useTableContext, useTablePersistence, useTableRowHeights, useTheme, useTooltip, useVirtualization, useYableDefaults };
+export { type ActionItem, type ActionsColumnOptions, type AdaptiveTableCardContext, type AdaptiveTableLayoutMode, type AdaptiveTableLayoutOptions, type AutoMeasurementsOptions, CellBadge, type CellBadgeProps, CellBoolean, type CellBooleanProps, CellCheckbox, CellCurrency, type CellCurrencyProps, CellDate, CellDatePicker, type CellDateProps, CellErrorBoundary, CellInput, CellLink, type CellLinkProps, type CellMeasureRecipe, type CellMeasurement, CellNumeric, type CellNumericProps, CellProgress, type CellProgressProps, CellRating, type CellRatingProps, CellRow, type CellRowProps, CellSelect, CellStack, type CellStackProps, CellStatus, CellStatusBadge, type CellStatusBadgeProps, type CellStatusProps, CellText, type CellTextProps, CellToggle, CellWithIcon, type CellWithIconProps, ColumnsPanel, ContextMenu, ContextMenuItem, type ContextMenuItemDef, DEFAULT_TEXT_RECIPE, DragHandle, ErrorBoundary, type ExpandColumnOptions, ExpandIcon, FillHandle, type FillHandleDragState, type FillHandleProps, FiltersPanel, FlashCell, FloatingFilter, GlobalFilter, LoadingOverlay, type LoadingOverlayProps, MasterDetail, NoRowsOverlay, type NoRowsOverlayProps, Pagination, PivotConfigPanel, type PivotConfigProps, type PivotFieldItem, type PivotValueItem, PrintLayout, type ResolvedYableProfile, type RowNumberColumnOptions, type SelectColumnOptions, type ServerTableController, type ServerTableFetchArgs, type ServerTableFetchResult, type ServerTableUpdateArgs, SetFilter, Sidebar, SortIndicator, StatusBar, StatusBarPanelComponent, type StatusBarPanelComponentProps, type StatusBarPanelConfig, type StatusBarPanelProps, Table, TableBody, TableCell, type TableCellProps$1 as TableCellProps, TableFooter, TableHeader, type TableHeaderCellProps, type TableProps, TableProvider, type TableRowProps, Tooltip, type TooltipPosition, type TooltipProps, TreeToggle, type UseCellFlashOptions, type UseClipboardOptions, type UseColumnVirtualizationOptions, type UseColumnVirtualizationResult, type UseFillHandleOptions, type UseFillHandleReturn, type UseKeyboardNavigationOptions, type UsePretextMeasurementOptions, type UsePretextMeasurementResult, type UsePrintLayoutOptions, type UseRowAnimationOptions, type UseRowDragOptions, type UseRowDragReturn, type UseServerTableOptions, type UseTableOptions, type UseTablePersistenceOptions, type UseTablePersistenceReturn, type UseTableRowHeightsOptions, type UseThemeOptions, type UseTooltipOptions, type UseVirtualizationOptions, type UseVirtualizationResult, type VirtualColumn, type VirtualRow, type YableCellConfig, type YableCellConfigSet, type YableColumnConfig, type YableColumnConfigSet, type YableConfig, type YableDefaults, YableProvider, type YableRowConfig, type YableTableProfile, type YableTableVisualConfig, actionsColumn, applyYableConfigToColumns, createYableConfig, expandColumn, getMeasureRecipeForCellType, getRegisteredCellTypes, getYableDefaultColumnDef, mergeEditChanges, resolveMeasureRecipe, resolveYableProfile, rowNumberColumn, selectColumn, useAutoMeasurements, useCellFlash, useClipboard, useColumnVirtualization, useContextMenu, useFillHandle, useKeyboardNavigation, usePretextMeasurement, usePrintLayout, useRowAnimation, useRowDrag, useServerTable, useTable, useTableContext, useTablePersistence, useTableRowHeights, useTheme, useTooltip, useVirtualization, useYableDefaults };

package/dist/index.d.ts

@@ -1,11 +1,11 @@
-import { RowData, ColumnDefBase, ColumnDefExtensions, Row, ColumnDef, Table as Table$1, Cell, Header, TableOptions, SortingState, ColumnFiltersState, PaginationState, TableState, Updater, Column, SortDirection, CellContext, ClipboardOptions, CellFlashInfo } from '@zvndev/yable-core';
+import { RowData, ColumnDefBase, ColumnDefExtensions, Row, ColumnDef, Table as Table$1, Cell, Column, Header, TableOptions, SortingState, ColumnFiltersState, PaginationState, TableState, Updater, SortDirection, CellContext, ClipboardOptions, CellFlashInfo } from '@zvndev/yable-core';
 export { AccessorFnColumnDef, AccessorKeyColumnDef, AggregationFn, Cell, CellStatus as CellCommitStatus, CellContext, CellFlashEvent, CellPatch, ClipboardOptions, Column, ColumnDef, ColumnDefBase, ColumnFiltersState, ColumnMeta, ColumnOrderState, ColumnPinningState, ColumnSizingInfoState, ColumnSizingState, CommitError, CommitErrorCells, CommitRecord, CommitResult, CommitsSlice, DisplayColumnDef, EditingState, ExpandedState, FillHandleState, FilterFn, FormulaEngine, FormulaError, FormulaFunction, FormulaState, GroupColumnDef, Header, HeaderContext, HeaderGroup, KeyboardNavigationAction, KeyboardNavigationCell, KeyboardNavigationDirection, KeyboardNavigationState, OnChangeFn, OnCommitFn, PaginationState, PartialLocale, PivotColumn, PivotConfig, PivotEngine, PivotFieldConfig, PivotRow, PivotState, PivotValueConfig, Row, RowData, RowDragEndEvent, RowDragEvent, RowDragState, RowEditCommitEvent, RowEditEvent, RowPinningState, RowReorderEvent, RowSelectionState, SortDirection, SortingFn, SortingState, Table as TableInstance, TableOptions, TableOptionsResolved, TableState, UndoAction, UndoRedoOptions, UndoRedoState, UndoStack, Updater, VisibilityState, YableLocale, aggregationFns, createColumnHelper, createLocale, createUndoRedoIntegration, en, filterFns, formulaFunctions, functionalUpdate, generatePivotColumnDefs, getDefaultLocale, getInitialPivotState, getPivotRowModel, resetLocale, setDefaultLocale, sortingFns } from '@zvndev/yable-core';
 import * as React$1 from 'react';
 import React__default, { CSSProperties, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { RowDragState } from '@zvndev/yable-core/features/rowDragging';
 
-type YableTableVisualConfig = Partial<Pick<TableProps<any>, 'striped' | 'bordered' | 'compact' | 'stickyHeader' | 'theme' | 'direction' | 'ariaLabel' | 'clickableRows' | 'floatingFilters' | 'columnVirtualization' | 'columnVirtualizationOverscan' | 'statusBar' | 'sidebar' | 'sidebarPanels' | 'defaultSidebarPanel'>>;
+type YableTableVisualConfig = Partial<Pick<TableProps<any>, 'striped' | 'bordered' | 'compact' | 'stickyHeader' | 'theme' | 'direction' | 'ariaLabel' | 'clickableRows' | 'floatingFilters' | 'columnVirtualization' | 'columnVirtualizationOverscan' | 'adaptiveLayout' | 'statusBar' | 'sidebar' | 'sidebarPanels' | 'defaultSidebarPanel'>>;
 type YableColumnConfig<TData extends RowData = any, TValue = unknown> = Partial<ColumnDefBase<TData, TValue>> & Partial<ColumnDefExtensions<TData, TValue>>;
 interface YableRowConfig<TData extends RowData = any> {
     className?: string | ((row: Row<TData>) => string | undefined);
@@ -38,6 +38,35 @@ declare function resolveYableProfile<TData extends RowData = any>(config?: Yable
 declare function getYableDefaultColumnDef<TData extends RowData>(profile?: YableTableProfile<TData>): YableColumnConfig<TData> | undefined;
 declare function applyYableConfigToColumns<TData extends RowData>(columns: ColumnDef<TData, any>[], profile?: YableTableProfile<TData>): ColumnDef<TData, any>[];
 
+type AdaptiveTableLayoutMode = 'auto' | 'table' | 'cards';
+interface AdaptiveTableCardContext<TData extends RowData> {
+    table: Table$1<TData>;
+    row: Row<TData>;
+    rowIndex: number;
+    cells: Cell<TData, unknown>[];
+    primaryCell?: Cell<TData, unknown>;
+    secondaryCells: Cell<TData, unknown>[];
+    visibleColumns: Column<TData, unknown>[];
+}
+interface AdaptiveTableLayoutOptions<TData extends RowData> {
+    /**
+     * `auto` switches at the configured container breakpoint, `cards` forces the
+     * adaptive card surface, and `table` keeps the desktop grid surface.
+     */
+    mode?: AdaptiveTableLayoutMode;
+    /** Container width in px where `auto` switches to cards. Default: 720. */
+    breakpoint?: number;
+    /** Column shown as the card title. Defaults to the first visible column. */
+    primaryColumnId?: string;
+    /** Ordered secondary columns. Defaults to all remaining visible columns. */
+    secondaryColumnIds?: string[];
+    /** Columns omitted from the adaptive card surface. */
+    hiddenColumnIds?: string[];
+    /** Caps secondary fields when no explicit `secondaryColumnIds` are provided. Default: 8. */
+    maxSecondaryColumns?: number;
+    /** Fully custom card renderer for product-specific mobile/tablet layouts. */
+    renderCard?: (context: AdaptiveTableCardContext<TData>) => React.ReactNode;
+}
 interface TableProps<TData extends RowData> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     table: Table$1<TData>;
     /** Enable sticky header */
@@ -96,6 +125,8 @@ interface TableProps<TData extends RowData> extends Omit<HTMLAttributes<HTMLDivE
     columnVirtualization?: boolean;
     /** Additional columns rendered beyond the viewport when column virtualization is enabled */
     columnVirtualizationOverscan?: number;
+    /** Render a structural card layout for tablet/mobile while reusing this table instance */
+    adaptiveLayout?: boolean | AdaptiveTableLayoutOptions<TData>;
     /** Accessible label for the grid container. Default: "Data table" */
     ariaLabel?: string;
 }
@@ -582,7 +613,7 @@ interface YableDefaults {
     /** Named config profile used by descendants unless overridden */
     tableProfile?: string;
     /** Default props applied to every `<Table>` in the subtree */
-    tableProps?: Partial<Pick<TableProps<any>, 'striped' | 'bordered' | 'compact' | 'stickyHeader' | 'theme' | 'direction' | 'ariaLabel'>>;
+    tableProps?: Partial<Pick<TableProps<any>, 'striped' | 'bordered' | 'compact' | 'stickyHeader' | 'theme' | 'direction' | 'ariaLabel' | 'adaptiveLayout'>>;
     /** Default column definition merged under every table's own `defaultColumnDef` */
     defaultColumnDef?: Partial<ColumnDefBase<any, unknown>> & Partial<ColumnDefExtensions<any, unknown>>;
 }
@@ -619,7 +650,7 @@ declare function YableProvider({ children, config, tableProfile, defaultColumnDe
     ariaLabel?: string;
 }): react_jsx_runtime.JSX.Element;
 
-declare function Table<TData extends RowData>({ table, stickyHeader: stickyHeaderProp, striped: stripedProp, bordered: borderedProp, compact: compactProp, theme: themeProp, config, configProfile, clickableRows, footer, loading, loadingComponent, loadingText, emptyMessage, emptyComponent, emptyIcon, emptyDetail, renderEmpty, renderLoading, children, className, direction: directionProp, statusBar, statusBarPanels, sidebar, sidebarPanels, defaultSidebarPanel, floatingFilters, columnVirtualization, columnVirtualizationOverscan, ariaLabel: ariaLabelProp, ...rest }: TableProps<TData>): react_jsx_runtime.JSX.Element;
+declare function Table<TData extends RowData>({ table, stickyHeader: stickyHeaderProp, striped: stripedProp, bordered: borderedProp, compact: compactProp, theme: themeProp, config, configProfile, clickableRows, footer, loading, loadingComponent, loadingText, emptyMessage, emptyComponent, emptyIcon, emptyDetail, renderEmpty, renderLoading, children, className, direction: directionProp, statusBar, statusBarPanels, sidebar, sidebarPanels, defaultSidebarPanel, floatingFilters, columnVirtualization, columnVirtualizationOverscan, adaptiveLayout: adaptiveLayoutProp, ariaLabel: ariaLabelProp, ...rest }: TableProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface TableHeaderProps<TData extends RowData> {
     table: Table$1<TData>;
@@ -1335,4 +1366,4 @@ declare function CellText({ children, variant, bold, truncate, size, }: CellText
  */
 declare function mergeEditChanges<TData>(data: TData[], changes: Record<string, Partial<TData>>, getRowId?: (row: TData, index: number) => string): TData[];
 
-export { type ActionItem, type ActionsColumnOptions, type AutoMeasurementsOptions, CellBadge, type CellBadgeProps, CellBoolean, type CellBooleanProps, CellCheckbox, CellCurrency, type CellCurrencyProps, CellDate, CellDatePicker, type CellDateProps, CellErrorBoundary, CellInput, CellLink, type CellLinkProps, type CellMeasureRecipe, type CellMeasurement, CellNumeric, type CellNumericProps, CellProgress, type CellProgressProps, CellRating, type CellRatingProps, CellRow, type CellRowProps, CellSelect, CellStack, type CellStackProps, CellStatus, CellStatusBadge, type CellStatusBadgeProps, type CellStatusProps, CellText, type CellTextProps, CellToggle, CellWithIcon, type CellWithIconProps, ColumnsPanel, ContextMenu, ContextMenuItem, type ContextMenuItemDef, DEFAULT_TEXT_RECIPE, DragHandle, ErrorBoundary, type ExpandColumnOptions, ExpandIcon, FillHandle, type FillHandleDragState, type FillHandleProps, FiltersPanel, FlashCell, FloatingFilter, GlobalFilter, LoadingOverlay, type LoadingOverlayProps, MasterDetail, NoRowsOverlay, type NoRowsOverlayProps, Pagination, PivotConfigPanel, type PivotConfigProps, type PivotFieldItem, type PivotValueItem, PrintLayout, type ResolvedYableProfile, type RowNumberColumnOptions, type SelectColumnOptions, type ServerTableController, type ServerTableFetchArgs, type ServerTableFetchResult, type ServerTableUpdateArgs, SetFilter, Sidebar, SortIndicator, StatusBar, StatusBarPanelComponent, type StatusBarPanelComponentProps, type StatusBarPanelConfig, type StatusBarPanelProps, Table, TableBody, TableCell, type TableCellProps$1 as TableCellProps, TableFooter, TableHeader, type TableHeaderCellProps, type TableProps, TableProvider, type TableRowProps, Tooltip, type TooltipPosition, type TooltipProps, TreeToggle, type UseCellFlashOptions, type UseClipboardOptions, type UseColumnVirtualizationOptions, type UseColumnVirtualizationResult, type UseFillHandleOptions, type UseFillHandleReturn, type UseKeyboardNavigationOptions, type UsePretextMeasurementOptions, type UsePretextMeasurementResult, type UsePrintLayoutOptions, type UseRowAnimationOptions, type UseRowDragOptions, type UseRowDragReturn, type UseServerTableOptions, type UseTableOptions, type UseTablePersistenceOptions, type UseTablePersistenceReturn, type UseTableRowHeightsOptions, type UseThemeOptions, type UseTooltipOptions, type UseVirtualizationOptions, type UseVirtualizationResult, type VirtualColumn, type VirtualRow, type YableCellConfig, type YableCellConfigSet, type YableColumnConfig, type YableColumnConfigSet, type YableConfig, type YableDefaults, YableProvider, type YableRowConfig, type YableTableProfile, type YableTableVisualConfig, actionsColumn, applyYableConfigToColumns, createYableConfig, expandColumn, getMeasureRecipeForCellType, getRegisteredCellTypes, getYableDefaultColumnDef, mergeEditChanges, resolveMeasureRecipe, resolveYableProfile, rowNumberColumn, selectColumn, useAutoMeasurements, useCellFlash, useClipboard, useColumnVirtualization, useContextMenu, useFillHandle, useKeyboardNavigation, usePretextMeasurement, usePrintLayout, useRowAnimation, useRowDrag, useServerTable, useTable, useTableContext, useTablePersistence, useTableRowHeights, useTheme, useTooltip, useVirtualization, useYableDefaults };
+export { type ActionItem, type ActionsColumnOptions, type AdaptiveTableCardContext, type AdaptiveTableLayoutMode, type AdaptiveTableLayoutOptions, type AutoMeasurementsOptions, CellBadge, type CellBadgeProps, CellBoolean, type CellBooleanProps, CellCheckbox, CellCurrency, type CellCurrencyProps, CellDate, CellDatePicker, type CellDateProps, CellErrorBoundary, CellInput, CellLink, type CellLinkProps, type CellMeasureRecipe, type CellMeasurement, CellNumeric, type CellNumericProps, CellProgress, type CellProgressProps, CellRating, type CellRatingProps, CellRow, type CellRowProps, CellSelect, CellStack, type CellStackProps, CellStatus, CellStatusBadge, type CellStatusBadgeProps, type CellStatusProps, CellText, type CellTextProps, CellToggle, CellWithIcon, type CellWithIconProps, ColumnsPanel, ContextMenu, ContextMenuItem, type ContextMenuItemDef, DEFAULT_TEXT_RECIPE, DragHandle, ErrorBoundary, type ExpandColumnOptions, ExpandIcon, FillHandle, type FillHandleDragState, type FillHandleProps, FiltersPanel, FlashCell, FloatingFilter, GlobalFilter, LoadingOverlay, type LoadingOverlayProps, MasterDetail, NoRowsOverlay, type NoRowsOverlayProps, Pagination, PivotConfigPanel, type PivotConfigProps, type PivotFieldItem, type PivotValueItem, PrintLayout, type ResolvedYableProfile, type RowNumberColumnOptions, type SelectColumnOptions, type ServerTableController, type ServerTableFetchArgs, type ServerTableFetchResult, type ServerTableUpdateArgs, SetFilter, Sidebar, SortIndicator, StatusBar, StatusBarPanelComponent, type StatusBarPanelComponentProps, type StatusBarPanelConfig, type StatusBarPanelProps, Table, TableBody, TableCell, type TableCellProps$1 as TableCellProps, TableFooter, TableHeader, type TableHeaderCellProps, type TableProps, TableProvider, type TableRowProps, Tooltip, type TooltipPosition, type TooltipProps, TreeToggle, type UseCellFlashOptions, type UseClipboardOptions, type UseColumnVirtualizationOptions, type UseColumnVirtualizationResult, type UseFillHandleOptions, type UseFillHandleReturn, type UseKeyboardNavigationOptions, type UsePretextMeasurementOptions, type UsePretextMeasurementResult, type UsePrintLayoutOptions, type UseRowAnimationOptions, type UseRowDragOptions, type UseRowDragReturn, type UseServerTableOptions, type UseTableOptions, type UseTablePersistenceOptions, type UseTablePersistenceReturn, type UseTableRowHeightsOptions, type UseThemeOptions, type UseTooltipOptions, type UseVirtualizationOptions, type UseVirtualizationResult, type VirtualColumn, type VirtualRow, type YableCellConfig, type YableCellConfigSet, type YableColumnConfig, type YableColumnConfigSet, type YableConfig, type YableDefaults, YableProvider, type YableRowConfig, type YableTableProfile, type YableTableVisualConfig, actionsColumn, applyYableConfigToColumns, createYableConfig, expandColumn, getMeasureRecipeForCellType, getRegisteredCellTypes, getYableDefaultColumnDef, mergeEditChanges, resolveMeasureRecipe, resolveYableProfile, rowNumberColumn, selectColumn, useAutoMeasurements, useCellFlash, useClipboard, useColumnVirtualization, useContextMenu, useFillHandle, useKeyboardNavigation, usePretextMeasurement, usePrintLayout, useRowAnimation, useRowDrag, useServerTable, useTable, useTableContext, useTablePersistence, useTableRowHeights, useTheme, useTooltip, useVirtualization, useYableDefaults };

package/dist/index.js

@@ -2213,6 +2213,62 @@ function FillHandle({
     }
   );
 }
+function renderCellContent(cell, table) {
+  const column = cell.column;
+  const isEditing = cell.getIsEditing();
+  const isAlwaysEditable = cell.getIsAlwaysEditable();
+  const cellStatus = table.getCellStatus(cell.row.id, column.id);
+  const overrideValue = cellStatus !== "idle" ? table.getCellRenderValue(cell.row.id, column.id) : void 0;
+  let content;
+  const cellDef = column.columnDef.cell;
+  const cellType = column.columnDef.cellType;
+  if (typeof cellDef === "function") {
+    const ctx = cell.getContext();
+    if (overrideValue !== void 0) {
+      const overriddenCtx = {
+        ...ctx,
+        getValue: () => overrideValue,
+        renderValue: () => overrideValue
+      };
+      content = cellDef(overriddenCtx);
+    } else {
+      content = cellDef(ctx);
+    }
+  } else if (cellType && !(isEditing || isAlwaysEditable)) {
+    content = resolveCellType(cellType, cell.getContext(), column.columnDef.cellTypeProps);
+  } else {
+    content = overrideValue !== void 0 ? overrideValue : cell.renderValue();
+  }
+  if (!cell.row.getIsGrouped()) return content;
+  if (column.id === cell.row.groupingColumnId) {
+    const expanded = cell.row.getIsExpanded();
+    return /* @__PURE__ */ jsxs("span", { className: "yable-group-cell", style: { paddingLeft: cell.row.depth * 16 }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "yable-group-toggle",
+          "aria-label": expanded ? "Collapse group" : "Expand group",
+          "aria-expanded": expanded,
+          onClick: cell.row.getToggleExpandedHandler(),
+          children: expanded ? "\u25BE" : "\u25B8"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "yable-group-value", children: String(cell.row.groupingValue ?? "") }),
+      /* @__PURE__ */ jsxs("span", { className: "yable-group-count", children: [
+        "(",
+        cell.row.getLeafRows().length,
+        ")"
+      ] })
+    ] });
+  }
+  const aggDef = column.columnDef.aggregatedCell;
+  if (typeof aggDef === "function") {
+    return aggDef(cell.getContext());
+  }
+  const aggVal = cell.getValue();
+  return aggVal == null ? null : aggVal;
+}
 function TableCell({
   cell,
   table,
@@ -2248,60 +2304,8 @@ function TableCell({
   const selectionEdges = table.getCellSelectionEdges(rowIndex, columnIndex);
   const isCellSelected = selectionEdges !== null;
   const isMultiCellSelection = selectionRange !== null && (selectionRange.start.rowIndex !== selectionRange.end.rowIndex || selectionRange.start.columnIndex !== selectionRange.end.columnIndex);
-  const overrideValue = cellStatus !== "idle" ? table.getCellRenderValue(cell.row.id, column.id) : void 0;
-  let content;
-  const cellDef = column.columnDef.cell;
-  const cellType = column.columnDef.cellType;
-  if (typeof cellDef === "function") {
-    const ctx = cell.getContext();
-    if (overrideValue !== void 0) {
-      const overriddenCtx = {
-        ...ctx,
-        getValue: () => overrideValue,
-        renderValue: () => overrideValue
-      };
-      content = cellDef(overriddenCtx);
-    } else {
-      content = cellDef(ctx);
-    }
-  } else if (cellType && !(isEditing || isAlwaysEditable)) {
-    content = resolveCellType(cellType, cell.getContext(), column.columnDef.cellTypeProps);
-  } else {
-    content = overrideValue !== void 0 ? overrideValue : cell.renderValue();
-  }
   const isGroupRow = cell.row.getIsGrouped();
-  if (isGroupRow) {
-    if (column.id === cell.row.groupingColumnId) {
-      const expanded = cell.row.getIsExpanded();
-      content = /* @__PURE__ */ jsxs("span", { className: "yable-group-cell", style: { paddingLeft: cell.row.depth * 16 }, children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "yable-group-toggle",
-            "aria-label": expanded ? "Collapse group" : "Expand group",
-            "aria-expanded": expanded,
-            onClick: cell.row.getToggleExpandedHandler(),
-            children: expanded ? "\u25BE" : "\u25B8"
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "yable-group-value", children: String(cell.row.groupingValue ?? "") }),
-        /* @__PURE__ */ jsxs("span", { className: "yable-group-count", children: [
-          "(",
-          cell.row.getLeafRows().length,
-          ")"
-        ] })
-      ] });
-    } else {
-      const aggDef = column.columnDef.aggregatedCell;
-      if (typeof aggDef === "function") {
-        content = aggDef(cell.getContext());
-      } else {
-        const aggVal = cell.getValue();
-        content = aggVal == null ? null : aggVal;
-      }
-    }
-  }
+  const content = renderCellContent(cell, table);
   const handleClick = useCallback(
     (e) => {
       if (cell.row.getIsGrouped()) return;
@@ -2866,6 +2870,202 @@ function isInteractiveClickTarget2(target) {
     target.closest('input, textarea, select, button, a[href], [contenteditable="true"]')
   );
 }
+function AdaptiveTableCards({
+  table,
+  layout,
+  clickableRows
+}) {
+  const rows = table.getRowModel().rows;
+  const visibleColumns = table.getVisibleLeafColumns();
+  return /* @__PURE__ */ jsx("div", { className: "yable-adaptive-cards", role: "rowgroup", children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+    AdaptiveTableCard,
+    {
+      row,
+      table,
+      rowIndex,
+      visibleColumns,
+      layout,
+      clickable: clickableRows
+    },
+    row.id
+  )) });
+}
+function AdaptiveTableCard({
+  row,
+  table,
+  rowIndex,
+  visibleColumns,
+  layout,
+  clickable
+}) {
+  const { cells, primaryCell, secondaryCells } = getAdaptiveCells(row, visibleColumns, layout);
+  return /* @__PURE__ */ jsx(
+    "article",
+    {
+      className: "yable-adaptive-card",
+      role: "row",
+      "data-selected": row.getIsSelected() || void 0,
+      "data-expanded": row.getIsExpanded() || void 0,
+      "data-clickable": clickable || void 0,
+      "data-row-id": row.id,
+      "data-row-index": rowIndex,
+      "aria-selected": table.options.enableRowSelection ? row.getIsSelected() : void 0,
+      onClick: (e) => {
+        if (table.options.enableRowClickSelection && row.getCanSelect() && !isInteractiveClickTarget3(e.target)) {
+          row.toggleSelected();
+        }
+        if (clickable) emitRowEvent(table, "row:click", row, e.nativeEvent);
+      },
+      onDoubleClick: (e) => emitRowEvent(table, "row:dblclick", row, e.nativeEvent),
+      onContextMenu: (e) => emitRowEvent(table, "row:contextmenu", row, e.nativeEvent),
+      children: layout.renderCard ? layout.renderCard({
+        table,
+        row,
+        rowIndex,
+        cells,
+        primaryCell,
+        secondaryCells,
+        visibleColumns
+      }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        primaryCell && /* @__PURE__ */ jsx("div", { className: "yable-adaptive-card-header", children: /* @__PURE__ */ jsx("div", { className: "yable-adaptive-card-title", children: /* @__PURE__ */ jsx(
+          AdaptiveTableCardCell,
+          {
+            cell: primaryCell,
+            table,
+            rowIndex,
+            columnIndex: 0,
+            primary: true
+          }
+        ) }) }),
+        secondaryCells.length > 0 && /* @__PURE__ */ jsx("div", { className: "yable-adaptive-card-fields", children: secondaryCells.map((cell, index) => /* @__PURE__ */ jsx(
+          AdaptiveTableCardCell,
+          {
+            cell,
+            table,
+            rowIndex,
+            columnIndex: index + 1
+          },
+          cell.id
+        )) })
+      ] })
+    }
+  );
+}
+function emitRowEvent(table, event, row, originalEvent) {
+  table.events.emit(event, {
+    row,
+    cells: row.getAllCells(),
+    originalEvent
+  });
+}
+function emitCellEvent(table, event, cell, originalEvent) {
+  table.events.emit(event, {
+    cell,
+    row: cell.row,
+    column: cell.column,
+    originalEvent
+  });
+}
+function AdaptiveTableCardCell({
+  cell,
+  table,
+  rowIndex,
+  columnIndex,
+  primary
+}) {
+  const column = cell.column;
+  const isEditing = cell.getIsEditing();
+  const isAlwaysEditable = cell.getIsAlwaysEditable();
+  const cellStatus = table.getCellStatus(cell.row.id, column.id);
+  const cellErrorMessage = table.getCellErrorMessage(cell.row.id, column.id);
+  const cellConflictWith = table.getCellConflictWith(cell.row.id, column.id);
+  const content = renderCellContent(cell, table);
+  const header = column.columnDef.header;
+  const label = typeof header === "string" ? header : column.id;
+  return /* @__PURE__ */ jsx(CellErrorBoundary, { resetKeys: [cell.getValue(), cellStatus], children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: primary ? "yable-adaptive-card-primary" : "yable-adaptive-card-cell",
+      "data-column-id": column.id,
+      "data-cell-status": cellStatus !== "idle" ? cellStatus : void 0,
+      "data-row-index": rowIndex,
+      "data-column-index": columnIndex,
+      role: "gridcell",
+      "aria-colindex": columnIndex + 1,
+      onClick: (e) => {
+        if (cell.row.getIsGrouped()) return;
+        emitCellEvent(table, "cell:click", cell, e.nativeEvent);
+        if (canCellEnterEditMode(table, cell.row, column) && !isAlwaysEditable && !isEditing && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
+          table.startEditing(cell.row.id, column.id);
+        }
+      },
+      onDoubleClick: (e) => emitCellEvent(table, "cell:dblclick", cell, e.nativeEvent),
+      onContextMenu: (e) => emitCellEvent(table, "cell:contextmenu", cell, e.nativeEvent),
+      children: [
+        !primary && /* @__PURE__ */ jsx("span", { className: "yable-adaptive-card-label", children: label }),
+        /* @__PURE__ */ jsxs("span", { className: "yable-adaptive-card-value", children: [
+          content,
+          cellStatus === "error" && /* @__PURE__ */ jsx(
+            CellStatusBadge,
+            {
+              status: "error",
+              message: cellErrorMessage,
+              onRetry: () => void table.retryCommit(cell.row.id, column.id),
+              onDismiss: () => table.dismissCommit(cell.row.id, column.id)
+            }
+          ),
+          cellStatus === "conflict" && /* @__PURE__ */ jsx(
+            CellStatusBadge,
+            {
+              status: "conflict",
+              conflictWith: cellConflictWith,
+              onRetry: () => void table.retryCommit(cell.row.id, column.id),
+              onDismiss: () => table.dismissCommit(cell.row.id, column.id)
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+function getAdaptiveCells(row, visibleColumns, layout) {
+  const hidden = new Set(layout.hiddenColumnIds ?? []);
+  const allCellsByColumn = new Map(row.getAllCells().map((cell) => [cell.column.id, cell]));
+  const visibleCells = [];
+  for (const column of visibleColumns) {
+    if (hidden.has(column.id)) continue;
+    const cell = allCellsByColumn.get(column.id);
+    if (cell) visibleCells.push(cell);
+  }
+  const cellsByColumn = new Map(visibleCells.map((cell) => [cell.column.id, cell]));
+  const primaryCell = (layout.primaryColumnId ? cellsByColumn.get(layout.primaryColumnId) : void 0) ?? visibleCells[0];
+  const primaryColumnId = primaryCell?.column.id;
+  let secondaryCells;
+  if (layout.secondaryColumnIds) {
+    secondaryCells = [];
+    for (const columnId of layout.secondaryColumnIds) {
+      if (hidden.has(columnId) || columnId === primaryColumnId) continue;
+      const cell = cellsByColumn.get(columnId);
+      if (cell) secondaryCells.push(cell);
+    }
+  } else {
+    secondaryCells = visibleCells.filter((cell) => cell.column.id !== primaryColumnId);
+    if (secondaryCells.length > layout.maxSecondaryColumns) {
+      secondaryCells = secondaryCells.slice(0, layout.maxSecondaryColumns);
+    }
+  }
+  return {
+    cells: visibleCells,
+    primaryCell,
+    secondaryCells
+  };
+}
+function isInteractiveClickTarget3(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  return Boolean(
+    target.closest('input, textarea, select, button, a[href], [contenteditable="true"]')
+  );
+}
 function TableFooter({ table }) {
   const footerGroups = table.getFooterGroups();
   if (!footerGroups.length) return null;
@@ -4193,6 +4393,7 @@ function Table({
   floatingFilters,
   columnVirtualization,
   columnVirtualizationOverscan,
+  adaptiveLayout: adaptiveLayoutProp,
   ariaLabel: ariaLabelProp,
   ...rest
 }) {
@@ -4218,6 +4419,7 @@ function Table({
   const resolvedFloatingFilters = floatingFilters ?? profileTableProps?.floatingFilters;
   const resolvedColumnVirtualization = columnVirtualization ?? profileTableProps?.columnVirtualization;
   const resolvedColumnVirtualizationOverscan = columnVirtualizationOverscan ?? profileTableProps?.columnVirtualizationOverscan;
+  const resolvedAdaptiveLayout = adaptiveLayoutProp ?? profileTableProps?.adaptiveLayout ?? providerTableProps?.adaptiveLayout;
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [sidebarPanel, setSidebarPanel] = useState(
     resolvedDefaultSidebarPanel ?? "columns"
@@ -4225,6 +4427,11 @@ function Table({
   const containerRef = useRef(null);
   const horizontalScrollRef = useRef(null);
   const isRtl = direction === "rtl";
+  const adaptiveLayout = useMemo(
+    () => normalizeAdaptiveLayout(resolvedAdaptiveLayout),
+    [resolvedAdaptiveLayout]
+  );
+  const adaptiveLayoutActive = useAdaptiveLayoutActive(containerRef, adaptiveLayout);
   const classNames = [
     "yable",
     theme && `yable-theme-${theme}`,
@@ -4235,6 +4442,8 @@ function Table({
     loading && "yable-loading",
     isRtl && "yable--rtl",
     sidebarOpen && "yable--sidebar-open",
+    adaptiveLayout && adaptiveLayout.mode !== "table" && "yable--adaptive-layout",
+    adaptiveLayoutActive && "yable--adaptive-cards-active",
     className
   ].filter(Boolean).join(" ");
   const rows = table.getRowModel().rows;
@@ -4244,7 +4453,7 @@ function Table({
   const allVisibleColumns = table.getVisibleLeafColumns();
   const hasPinnedColumns = table.getLeftVisibleLeafColumns().length > 0 || table.getRightVisibleLeafColumns().length > 0;
   const hasGroupedHeaders = table.getHeaderGroups().length > 1;
-  const canVirtualizeColumns = Boolean(resolvedColumnVirtualization) && !hasPinnedColumns && !hasGroupedHeaders && allVisibleColumns.length > 0;
+  const canVirtualizeColumns = !adaptiveLayoutActive && Boolean(resolvedColumnVirtualization) && !hasPinnedColumns && !hasGroupedHeaders && allVisibleColumns.length > 0;
   const allVisibleColumnSizeSignature = allVisibleColumns.map((column) => `${column.id}:${column.getSize()}`).join("|");
   const columnVirtualState = useColumnVirtualization({
     containerRef: horizontalScrollRef,
@@ -4360,7 +4569,7 @@ function Table({
     columnVirtualState.startOffset,
     visibleColumnTotalSize
   ]);
-  const tableNode = /* @__PURE__ */ jsxs(
+  const desktopTableNode = /* @__PURE__ */ jsxs(
     "table",
     {
       className: "yable-table",
@@ -4382,6 +4591,14 @@ function Table({
       ]
     }
   );
+  const tableNode = adaptiveLayoutActive && adaptiveLayout ? /* @__PURE__ */ jsx(
+    AdaptiveTableCards,
+    {
+      table,
+      layout: adaptiveLayout,
+      clickableRows: resolvedClickableRows
+    }
+  ) : desktopTableNode;
   return /* @__PURE__ */ jsx(TableProvider, { value: table, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -4397,7 +4614,7 @@ function Table({
       ...rest,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "yable-main", children: [
-          showColumnVirtualizationShell ? /* @__PURE__ */ jsx(
+          showColumnVirtualizationShell && !adaptiveLayoutActive ? /* @__PURE__ */ jsx(
             "div",
             {
               ref: horizontalScrollRef,
@@ -4513,6 +4730,58 @@ function Table({
     }
   ) });
 }
+var DEFAULT_ADAPTIVE_BREAKPOINT = 720;
+var DEFAULT_ADAPTIVE_SECONDARY_COLUMNS = 8;
+function normalizeAdaptiveLayout(layout) {
+  if (!layout) return null;
+  if (layout === true) {
+    return {
+      mode: "auto",
+      breakpoint: DEFAULT_ADAPTIVE_BREAKPOINT,
+      maxSecondaryColumns: DEFAULT_ADAPTIVE_SECONDARY_COLUMNS
+    };
+  }
+  return {
+    mode: layout.mode ?? "auto",
+    breakpoint: layout.breakpoint ?? DEFAULT_ADAPTIVE_BREAKPOINT,
+    primaryColumnId: layout.primaryColumnId,
+    secondaryColumnIds: layout.secondaryColumnIds,
+    hiddenColumnIds: layout.hiddenColumnIds,
+    maxSecondaryColumns: layout.maxSecondaryColumns ?? DEFAULT_ADAPTIVE_SECONDARY_COLUMNS,
+    renderCard: layout.renderCard
+  };
+}
+function useAdaptiveLayoutActive(containerRef, layout) {
+  const [active, setActive] = useState(() => layout?.mode === "cards");
+  useEffect(() => {
+    if (!layout) {
+      setActive(false);
+      return;
+    }
+    if (layout.mode === "cards" || layout.mode === "table") {
+      setActive(layout.mode === "cards");
+      return;
+    }
+    const node = containerRef.current;
+    if (!node) return;
+    const update = (width) => {
+      setActive(width <= layout.breakpoint);
+    };
+    update(node.getBoundingClientRect().width || node.clientWidth);
+    if (typeof ResizeObserver === "undefined") {
+      const handleResize = () => update(node.getBoundingClientRect().width || node.clientWidth);
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width ?? node.getBoundingClientRect().width;
+      update(width);
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [containerRef, layout]);
+  return active;
+}
 function ChevronLeftIcon() {
   return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M8.5 3L4.5 7L8.5 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }