@serkonda7/solid-components 0.0.7 → 0.1.0

package/README.md

@@ -8,7 +8,7 @@ Reusable components for [SolidJS](https://www.solidjs.com/).
 
 ## 📦 Installation
 ```sh
-bun install @serkonda7/solid-components solid-js @tabler/icons-solidjs
+bun install @serkonda7/solid-components solid-js
 ```
 
 
@@ -26,6 +26,7 @@ import '@serkonda7/solid-components/styles.css'
 
 These components are available:
 - `DataTable` - generic table with optional sorting, row selection, 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.
 
 For the full API, examples, and agent notes, see [docs.md](docs.md).

package/dist/combobox.d.ts

@@ -33,6 +33,8 @@ export interface ComboboxProps {
     onAdd?: (query: string) => void;
     /** Text of the pinned add entry. Defaults to `Add`. */
     addLabel?: string;
+    /** Placeholder while closed and nothing is selected; `emptyLabel` takes precedence. */
+    placeholder?: string;
     /** Placeholder while open and nothing is selected. Defaults to `Search`. */
     searchLabel?: string;
     /** Shown when no option matches the search. Defaults to `No matching objects`. */

package/dist/data-table.d.ts

@@ -40,6 +40,8 @@ export interface DataTableProps<TRow> {
     columnCustomizerTitle?: string;
     columnCustomizerShowAllLabel?: string;
     columnCustomizerResetLabel?: string;
+    /** Content rendered at the start of the toolbar, before the column customizer. */
+    toolbar?: JSX.Element;
     loading?: boolean | Accessor<boolean>;
     empty?: boolean | Accessor<boolean>;
     loadingContent?: JSX.Element;

package/dist/filter-table.d.ts

@@ -0,0 +1,53 @@
+import type { Accessor, JSX } from 'solid-js';
+import { type ComboboxOption } from './combobox';
+import { type DataTableProps } from './data-table';
+export type FilterTableFilterType = 'text' | 'select' | 'boolean';
+/** A filter's value: text for `text`/`boolean` (`'true'`/`'false'`), a list for `select`. */
+export type FilterTableValue = string | string[];
+/**
+ * Applied filters by filter key, plus the quick search under `q`. Inactive
+ * filters are omitted, so the record maps directly onto URL query params.
+ */
+export type FilterTableValues = Record<string, FilterTableValue>;
+export interface FilterTableFilter<TRow> {
+    key: string;
+    label: string;
+    type: FilterTableFilterType;
+    /** Fieldset heading in the filter form; ungrouped filters come first. */
+    group?: string;
+    /** Value matched against; defaults to `row[key]`. May return an array for `select`. */
+    getValue?: (row: TRow) => unknown;
+    /** Replaces the built-in matching for this filter. */
+    match?: (row: TRow, value: FilterTableValue) => boolean;
+    /** Choices of a `select` filter; derived from the row values when omitted. */
+    options?: ComboboxOption[];
+    placeholder?: string;
+}
+export interface FilterTableProps<TRow> extends Omit<DataTableProps<TRow>, 'toolbar'> {
+    filters: FilterTableFilter<TRow>[];
+    /** Controlled applied filters; pair with `onFilterValuesChange`. */
+    filterValues?: FilterTableValues | Accessor<FilterTableValues>;
+    defaultFilterValues?: FilterTableValues;
+    onFilterValuesChange?: (values: FilterTableValues) => void;
+    /** Pass `rows` through unfiltered, e.g. when the server applies `filterValues`. */
+    manualFiltering?: boolean;
+    /** Shows the quick search input above the table. Defaults to `true`. */
+    quickSearch?: boolean;
+    /** Text matched by the quick search; defaults to the row's column values. */
+    getSearchText?: (row: TRow) => string;
+    quickSearchLabel?: string;
+    resultsLabel?: string;
+    filtersLabel?: string;
+    applyLabel?: string;
+    resetLabel?: string;
+    clearAllLabel?: string;
+    anyLabel?: string;
+    yesLabel?: string;
+    noLabel?: string;
+}
+/**
+ * `DataTable` with filtering: a Results tab with a quick search and
+ * removable pills for the applied filters, and a Filters tab with a grouped form
+ * that is applied on submit.
+ */
+export declare function FilterTable<TRow>(props: FilterTableProps<TRow>): JSX.Element;

package/dist/index.d.ts

@@ -6,3 +6,4 @@
  */
 export { Combobox, type ComboboxIcon, type ComboboxOption, type ComboboxProps, } from './combobox';
 export { DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, type DataTableSortDirection, } from './data-table';
+export { FilterTable, type FilterTableFilter, type FilterTableFilterType, type FilterTableProps, type FilterTableValue, type FilterTableValues, } from './filter-table';