@serkonda7/solid-components 0.2.0 → 0.3.0

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/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;

package/dist/filter-table.d.ts

@@ -60,7 +60,7 @@ export interface FilterTableProps<TRow> extends Omit<DataTableProps<TRow>, 'tool
     saveLabel?: string;
     saveNameLabel?: string;
     cancelLabel?: string;
-    deleteSavedFilterLabel?: string;
+    clearSavedFilterLabel?: string;
 }
 /**
  * `DataTable` with filtering: a Results tab with a quick search and