@serkonda7/solid-components 0.2.1 → 0.3.1

package/README.md

@@ -34,7 +34,7 @@ export default defineConfig({ plugins: [tablerIcons(), solid()] })
 ```
 
 These components are available:
-- `DataTable` - generic table with optional sorting, row selection, actions, loading, empty states, and column customizer.
+- `DataTable` - generic table with optional sorting, actions, loading, empty states, and column customizer.
 - `FilterTable` - `DataTable` with filtering: quick search, a grouped filter form, and removable filter pills.
 - `Combobox` - searchable, accessible dropdown with keyboard navigation, option icons, a detail column, and an optional "Add …" entry.
 - `SearchBar` - search input with clear button and a global Ctrl/Cmd+K focus shortcut.

package/dist/combobox.d.ts

@@ -44,7 +44,8 @@ export interface ComboboxProps {
 /**
  * Searchable dropdown of `options`, with an optional leading empty choice.
  * A text combobox: typing filters the options by label and detail, arrow keys
- * move the highlight (wrapping around), Enter picks it, Escape closes. The
- * input shows the selected label while closed; the value sits in `data-value`.
+ * move the highlight (wrapping around), Enter picks it, Tab picks it and moves
+ * focus on, Escape closes. The input shows the selected label while closed;
+ * the value sits in `data-value`.
  */
 export declare function Combobox(props: ComboboxProps): JSX.Element;

package/dist/data-table.d.ts

@@ -10,6 +10,12 @@ export interface DataTableColumn<TRow> {
     sortable?: boolean;
     sortValue?: (row: TRow) => unknown;
     class?: string;
+    /** Column width: a number (px) or any CSS length, e.g. `'12rem'` or `'20%'`. */
+    width?: number | string;
+    /** Minimum column width: a number (px) or any CSS length. */
+    minWidth?: number | string;
+    /** Maximum column width: a number (px) or any CSS length. */
+    maxWidth?: number | string;
     ariaLabel?: string;
     getValue?: (row: TRow) => JSX.Element;
     /** Whether the column is visible by default when the column customizer is used. Defaults to `true`. */
@@ -23,9 +29,6 @@ export interface DataTableProps<TRow> {
     getRowId: (row: TRow) => string | number;
     getCell?: (row: TRow, column: DataTableColumn<TRow>) => JSX.Element;
     rowActions?: (row: TRow) => JSX.Element;
-    selected?: string[] | number[] | Accessor<string[] | number[]>;
-    onSelectionChange?: (ids: (string | number)[]) => void;
-    selectionLabel?: string;
     sortKey?: string | Accessor<string | undefined>;
     sortDirection?: DataTableSortDirection | Accessor<DataTableSortDirection>;
     defaultSort?: DataTableSort;
@@ -39,13 +42,15 @@ export interface DataTableProps<TRow> {
     columnOrder?: string[] | Accessor<string[]>;
     defaultColumnOrder?: string[];
     onColumnOrderChange?: (orderedKeys: string[]) => void;
+    /** Shows a drag handle between column headers to resize columns. */
+    resizableColumns?: boolean;
+    /** Called with all current pixel widths (by column key) after a resize. */
+    onColumnWidthsChange?: (widths: Record<string, number>) => void;
     showColumnCustomizer?: boolean | Accessor<boolean>;
     columnCustomizerLabel?: string;
     columnCustomizerTitle?: string;
     columnCustomizerShowAllLabel?: string;
     columnCustomizerResetLabel?: string;
-    columnCustomizerMoveUpLabel?: string;
-    columnCustomizerMoveDownLabel?: string;
     /** Content rendered at the start of the toolbar, before the column customizer. */
     toolbar?: JSX.Element;
     loading?: boolean | Accessor<boolean>;
@@ -57,6 +62,6 @@ export interface DataTableProps<TRow> {
 /**
  * Generic accessible data table. Data fetching, navigation, and cell content
  * stay with the consuming app; this component owns table structure and the
- * repeated selection/sort/loading states.
+ * repeated sort/loading states.
  */
 export declare function DataTable<TRow>(props: DataTableProps<TRow>): JSX.Element;