boneless-table 0.1.0 → 0.1.2

package/README.md

@@ -41,6 +41,28 @@ when `scroller="fill"`, which must be placed in a parent with a stable height. V
 measured after rendering, so cells may wrap or render variable-height content. Use
 `virtualization={false}` to opt out in a fill layout.
 
+## Column sizing and resizing
+
+Put layout decisions on the column that owns them. `widthPx` starts a column at a fixed width;
+otherwise `minPx` and `flex` define its shared grid track. Set `resizable: true` to render a
+resize handle. User resizing is local to the table instance and replaces that column's flex or
+initial width until Reset is selected. `minPx` and `maxPx` bound the resulting width.
+
+```tsx
+const columns = [
+  {
+    key: 'account',
+    header: 'Account',
+    meta: { bonelessTable: { sizing: { minPx: 180, flex: 2, resizable: true } } },
+  },
+  {
+    key: 'renewal',
+    header: 'Renewal',
+    meta: { bonelessTable: { sizing: { widthPx: 160, minPx: 120, maxPx: 240, resizable: true } } },
+  },
+] satisfies BonelessTableColumn<Account>[]
+```
+
 For non-text column headers, set `meta.columnLabel` to provide the label shown in the built-in
 column chooser; otherwise the chooser falls back to the column id.
 

package/dist/index.d.mts

@@ -7,11 +7,17 @@ type ColumnAlignment = 'left' | 'right';
 type ColumnBorders = 'none' | 'left' | 'right' | 'both';
 type FilterType = 'text' | 'select';
 type RevealMode = 'always' | 'hover';
+/**
+ * Column layout belongs with the column definition. A width is the column's initial fixed width;
+ * a flex value shares remaining space until the user resizes that column. `resizable` is opt-in
+ * so existing unstyled tables do not gain controls unexpectedly.
+ */
 type BonelessTableColumnSizing = {
-    widthPx: number;
-} | {
-    minPx: number;
+    widthPx?: number;
+    minPx?: number;
+    maxPx?: number;
     flex?: number;
+    resizable?: boolean;
 };
 type BonelessTableColumnSettings = {
     sizing?: BonelessTableColumnSizing;
@@ -24,20 +30,26 @@ type BonelessTableColumnSettings = {
     filtering?: {
         type: FilterType;
         options?: readonly string[];
-        reveal?: RevealMode;
     };
     valueDisplay?: {
         truncateAt: number;
         suffix?: string;
     };
 };
+type ResolvedBonelessTableColumnSettings = {
+    sizing: BonelessTableColumnSizing;
+    align: ColumnAlignment;
+    borders: ColumnBorders;
+    sorting: Required<NonNullable<BonelessTableColumnSettings['sorting']>>;
+    filtering: BonelessTableColumnSettings['filtering'];
+    valueDisplay: BonelessTableColumnSettings['valueDisplay'];
+};
 type BonelessTableSettings = {
     columnDefaults: Required<Pick<BonelessTableColumnSettings, 'align' | 'borders'>> & {
-        sizing: Required<NonNullable<BonelessTableColumnSettings['sizing']>>;
+        sizing: Required<Pick<BonelessTableColumnSizing, 'minPx' | 'flex'>>;
         sorting: Required<NonNullable<BonelessTableColumnSettings['sorting']>>;
     };
     interactions: {
-        filterReveal: RevealMode;
         horizontalOverflow: 'auto' | 'scroll';
     };
 };
@@ -49,31 +61,7 @@ declare function resolveColumnSettings(settings: BonelessTableSettings, column:
             bonelessTable?: BonelessTableColumnSettings;
         };
     };
-}): {
-    sizing: {
-        minPx?: number | undefined;
-        flex?: number;
-        widthPx: number;
-    } | {
-        minPx: number;
-        flex: number;
-    };
-    align: ColumnAlignment;
-    borders: ColumnBorders;
-    sorting: {
-        enabled: boolean;
-        reveal: RevealMode;
-    };
-    filtering: {
-        type: FilterType;
-        options?: readonly string[];
-        reveal?: RevealMode;
-    } | undefined;
-    valueDisplay: {
-        truncateAt: number;
-        suffix?: string;
-    } | undefined;
-};
+}): ResolvedBonelessTableColumnSettings;
 declare function compactValue(value: unknown, settings?: BonelessTableColumnSettings): string;
 
 declare module '@tanstack/react-table' {
@@ -137,6 +125,7 @@ type BonelessTableToolbarLayout<TData extends RowData> = (context: {
     actions: ReactNode;
 }) => ReactNode;
 type BonelessTableSlot<TData extends RowData> = boolean | ReactNode | ((table: Table<TData>) => ReactNode);
+type BonelessTableFilterPlacement = 'above' | 'below';
 type BonelessTableRowClickEvent = MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>;
 /**
  * Named hooks for your stylesheet. The renderer applies no default class names or visual styles.
@@ -145,15 +134,23 @@ type BonelessTableClassNames = Partial<{
     root: string;
     toolbar: string;
     toolbarSummary: string;
+    toolbarCount: string;
+    toolbarLabel: string;
     toolbarHint: string;
     toolbarActions: string;
     scroller: string;
+    headerScroller: string;
     table: string;
     headerGroup: string;
     headerRow: string;
     header: string;
     headerButton: string;
+    headerLabel: string;
+    resizeHandle: string;
     sortIndicator: string;
+    filters: string;
+    filterItem: string;
+    filterLabel: string;
     rowGroup: string;
     row: string;
     cell: string;
@@ -203,6 +200,10 @@ type BonelessTablePresentationOptions<TData extends RowData> = {
     toolbar?: BonelessTableSlot<TData>;
     /** Reposition the default summary and action controls without rebuilding their behavior. */
     toolbarLayout?: BonelessTableToolbarLayout<TData>;
+    /** Built-in filters, custom filter content, or a render function receiving the table instance. */
+    filters?: BonelessTableSlot<TData>;
+    /** Places the filter region outside the table scroll area. Defaults to "above". */
+    filterPlacement?: BonelessTableFilterPlacement;
     footer?: BonelessTableSlot<TData>;
     totalCount?: number;
     resultLabel?: string;
@@ -232,7 +233,7 @@ type BonelessTableProps<TData extends RowData> = BonelessTableOptions<TData> & B
     data: TData[];
     columns: BonelessTableColumn<TData>[];
 };
-declare function BonelessTable<TData extends RowData>({ data, columns, settings: settingsOverride, className, classNames, icons, tree: treeOption, isLoading, isFetchingMore, skeletonRows, skeletonLabel, onNearEnd, canLoadMore, nearEndOffset, filterDebounceMs, scroller, toolbar, toolbarLayout, footer, totalCount, resultLabel, resultHint, onReset, onRowClick, scrollToTopOn, rowLink, emptyState, virtualization, ...tableOptions }: BonelessTableProps<TData>): react.JSX.Element;
+declare function BonelessTable<TData extends RowData>({ data, columns, settings: settingsOverride, className, classNames, icons, tree: treeOption, isLoading, isFetchingMore, skeletonRows, skeletonLabel, onNearEnd, canLoadMore, nearEndOffset, filterDebounceMs, scroller, toolbar, toolbarLayout, filters, filterPlacement, footer, totalCount, resultLabel, resultHint, onReset, onRowClick, scrollToTopOn, rowLink, emptyState, virtualization, ...tableOptions }: BonelessTableProps<TData>): react.JSX.Element;
 
 declare function defineColumns<TData extends RowData>(columns: BonelessTableColumn<TData>[]): BonelessTableColumn<TData>[];
 declare function resolveColumns<TData extends RowData>(columns: BonelessTableColumn<TData>[]): ResolvedBonelessTableColumn<TData>[];
@@ -255,4 +256,4 @@ declare function TableSkeleton({ columnCount, rows, label, classNames, }: {
     classNames?: Pick<BonelessTableClassNames, 'row' | 'cell' | 'skeleton'>;
 }): react.JSX.Element;
 
-export { BonelessTable, type BonelessTableClassNames, type BonelessTableColumn, type BonelessTableColumnSettings, type BonelessTableIcons, type BonelessTableOptions, type BonelessTablePresentationOptions, type BonelessTableProps, type BonelessTableRowClickEvent, type BonelessTableRowLink, type BonelessTableRowLinkComponentProps, type BonelessTableSettings, type BonelessTableSlot, type BonelessTableToolbarLayout, type BonelessTableTreeOptions, type ColumnAlignment, type ColumnBorders, ColumnFilter, ColumnMenu, type DeepPartial, type FilterType, type ResolvedBonelessTableColumn, type RevealMode, TableSkeleton, compactValue, defaultBonelessTableSettings, defineColumns, getColumnIds, mergeBonelessTableSettings, resolveColumnSettings, resolveColumns, resolveRowHref, resolveRowLinkLabel, withDefaultCells };
+export { BonelessTable, type BonelessTableClassNames, type BonelessTableColumn, type BonelessTableColumnSettings, type BonelessTableColumnSizing, type BonelessTableFilterPlacement, type BonelessTableIcons, type BonelessTableOptions, type BonelessTablePresentationOptions, type BonelessTableProps, type BonelessTableRowClickEvent, type BonelessTableRowLink, type BonelessTableRowLinkComponentProps, type BonelessTableSettings, type BonelessTableSlot, type BonelessTableToolbarLayout, type BonelessTableTreeOptions, type ColumnAlignment, type ColumnBorders, ColumnFilter, ColumnMenu, type DeepPartial, type FilterType, type ResolvedBonelessTableColumn, type ResolvedBonelessTableColumnSettings, type RevealMode, TableSkeleton, compactValue, defaultBonelessTableSettings, defineColumns, getColumnIds, mergeBonelessTableSettings, resolveColumnSettings, resolveColumns, resolveRowHref, resolveRowLinkLabel, withDefaultCells };

package/dist/index.d.ts

@@ -7,11 +7,17 @@ type ColumnAlignment = 'left' | 'right';
 type ColumnBorders = 'none' | 'left' | 'right' | 'both';
 type FilterType = 'text' | 'select';
 type RevealMode = 'always' | 'hover';
+/**
+ * Column layout belongs with the column definition. A width is the column's initial fixed width;
+ * a flex value shares remaining space until the user resizes that column. `resizable` is opt-in
+ * so existing unstyled tables do not gain controls unexpectedly.
+ */
 type BonelessTableColumnSizing = {
-    widthPx: number;
-} | {
-    minPx: number;
+    widthPx?: number;
+    minPx?: number;
+    maxPx?: number;
     flex?: number;
+    resizable?: boolean;
 };
 type BonelessTableColumnSettings = {
     sizing?: BonelessTableColumnSizing;
@@ -24,20 +30,26 @@ type BonelessTableColumnSettings = {
     filtering?: {
         type: FilterType;
         options?: readonly string[];
-        reveal?: RevealMode;
     };
     valueDisplay?: {
         truncateAt: number;
         suffix?: string;
     };
 };
+type ResolvedBonelessTableColumnSettings = {
+    sizing: BonelessTableColumnSizing;
+    align: ColumnAlignment;
+    borders: ColumnBorders;
+    sorting: Required<NonNullable<BonelessTableColumnSettings['sorting']>>;
+    filtering: BonelessTableColumnSettings['filtering'];
+    valueDisplay: BonelessTableColumnSettings['valueDisplay'];
+};
 type BonelessTableSettings = {
     columnDefaults: Required<Pick<BonelessTableColumnSettings, 'align' | 'borders'>> & {
-        sizing: Required<NonNullable<BonelessTableColumnSettings['sizing']>>;
+        sizing: Required<Pick<BonelessTableColumnSizing, 'minPx' | 'flex'>>;
         sorting: Required<NonNullable<BonelessTableColumnSettings['sorting']>>;
     };
     interactions: {
-        filterReveal: RevealMode;
         horizontalOverflow: 'auto' | 'scroll';
     };
 };
@@ -49,31 +61,7 @@ declare function resolveColumnSettings(settings: BonelessTableSettings, column:
             bonelessTable?: BonelessTableColumnSettings;
         };
     };
-}): {
-    sizing: {
-        minPx?: number | undefined;
-        flex?: number;
-        widthPx: number;
-    } | {
-        minPx: number;
-        flex: number;
-    };
-    align: ColumnAlignment;
-    borders: ColumnBorders;
-    sorting: {
-        enabled: boolean;
-        reveal: RevealMode;
-    };
-    filtering: {
-        type: FilterType;
-        options?: readonly string[];
-        reveal?: RevealMode;
-    } | undefined;
-    valueDisplay: {
-        truncateAt: number;
-        suffix?: string;
-    } | undefined;
-};
+}): ResolvedBonelessTableColumnSettings;
 declare function compactValue(value: unknown, settings?: BonelessTableColumnSettings): string;
 
 declare module '@tanstack/react-table' {
@@ -137,6 +125,7 @@ type BonelessTableToolbarLayout<TData extends RowData> = (context: {
     actions: ReactNode;
 }) => ReactNode;
 type BonelessTableSlot<TData extends RowData> = boolean | ReactNode | ((table: Table<TData>) => ReactNode);
+type BonelessTableFilterPlacement = 'above' | 'below';
 type BonelessTableRowClickEvent = MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>;
 /**
  * Named hooks for your stylesheet. The renderer applies no default class names or visual styles.
@@ -145,15 +134,23 @@ type BonelessTableClassNames = Partial<{
     root: string;
     toolbar: string;
     toolbarSummary: string;
+    toolbarCount: string;
+    toolbarLabel: string;
     toolbarHint: string;
     toolbarActions: string;
     scroller: string;
+    headerScroller: string;
     table: string;
     headerGroup: string;
     headerRow: string;
     header: string;
     headerButton: string;
+    headerLabel: string;
+    resizeHandle: string;
     sortIndicator: string;
+    filters: string;
+    filterItem: string;
+    filterLabel: string;
     rowGroup: string;
     row: string;
     cell: string;
@@ -203,6 +200,10 @@ type BonelessTablePresentationOptions<TData extends RowData> = {
     toolbar?: BonelessTableSlot<TData>;
     /** Reposition the default summary and action controls without rebuilding their behavior. */
     toolbarLayout?: BonelessTableToolbarLayout<TData>;
+    /** Built-in filters, custom filter content, or a render function receiving the table instance. */
+    filters?: BonelessTableSlot<TData>;
+    /** Places the filter region outside the table scroll area. Defaults to "above". */
+    filterPlacement?: BonelessTableFilterPlacement;
     footer?: BonelessTableSlot<TData>;
     totalCount?: number;
     resultLabel?: string;
@@ -232,7 +233,7 @@ type BonelessTableProps<TData extends RowData> = BonelessTableOptions<TData> & B
     data: TData[];
     columns: BonelessTableColumn<TData>[];
 };
-declare function BonelessTable<TData extends RowData>({ data, columns, settings: settingsOverride, className, classNames, icons, tree: treeOption, isLoading, isFetchingMore, skeletonRows, skeletonLabel, onNearEnd, canLoadMore, nearEndOffset, filterDebounceMs, scroller, toolbar, toolbarLayout, footer, totalCount, resultLabel, resultHint, onReset, onRowClick, scrollToTopOn, rowLink, emptyState, virtualization, ...tableOptions }: BonelessTableProps<TData>): react.JSX.Element;
+declare function BonelessTable<TData extends RowData>({ data, columns, settings: settingsOverride, className, classNames, icons, tree: treeOption, isLoading, isFetchingMore, skeletonRows, skeletonLabel, onNearEnd, canLoadMore, nearEndOffset, filterDebounceMs, scroller, toolbar, toolbarLayout, filters, filterPlacement, footer, totalCount, resultLabel, resultHint, onReset, onRowClick, scrollToTopOn, rowLink, emptyState, virtualization, ...tableOptions }: BonelessTableProps<TData>): react.JSX.Element;
 
 declare function defineColumns<TData extends RowData>(columns: BonelessTableColumn<TData>[]): BonelessTableColumn<TData>[];
 declare function resolveColumns<TData extends RowData>(columns: BonelessTableColumn<TData>[]): ResolvedBonelessTableColumn<TData>[];
@@ -255,4 +256,4 @@ declare function TableSkeleton({ columnCount, rows, label, classNames, }: {
     classNames?: Pick<BonelessTableClassNames, 'row' | 'cell' | 'skeleton'>;
 }): react.JSX.Element;
 
-export { BonelessTable, type BonelessTableClassNames, type BonelessTableColumn, type BonelessTableColumnSettings, type BonelessTableIcons, type BonelessTableOptions, type BonelessTablePresentationOptions, type BonelessTableProps, type BonelessTableRowClickEvent, type BonelessTableRowLink, type BonelessTableRowLinkComponentProps, type BonelessTableSettings, type BonelessTableSlot, type BonelessTableToolbarLayout, type BonelessTableTreeOptions, type ColumnAlignment, type ColumnBorders, ColumnFilter, ColumnMenu, type DeepPartial, type FilterType, type ResolvedBonelessTableColumn, type RevealMode, TableSkeleton, compactValue, defaultBonelessTableSettings, defineColumns, getColumnIds, mergeBonelessTableSettings, resolveColumnSettings, resolveColumns, resolveRowHref, resolveRowLinkLabel, withDefaultCells };
+export { BonelessTable, type BonelessTableClassNames, type BonelessTableColumn, type BonelessTableColumnSettings, type BonelessTableColumnSizing, type BonelessTableFilterPlacement, type BonelessTableIcons, type BonelessTableOptions, type BonelessTablePresentationOptions, type BonelessTableProps, type BonelessTableRowClickEvent, type BonelessTableRowLink, type BonelessTableRowLinkComponentProps, type BonelessTableSettings, type BonelessTableSlot, type BonelessTableToolbarLayout, type BonelessTableTreeOptions, type ColumnAlignment, type ColumnBorders, ColumnFilter, ColumnMenu, type DeepPartial, type FilterType, type ResolvedBonelessTableColumn, type ResolvedBonelessTableColumnSettings, type RevealMode, TableSkeleton, compactValue, defaultBonelessTableSettings, defineColumns, getColumnIds, mergeBonelessTableSettings, resolveColumnSettings, resolveColumns, resolveRowHref, resolveRowLinkLabel, withDefaultCells };