@spaceinvoices/react-ui 0.4.3 → 0.4.5

package/src/components/table/README.md

@@ -1,6 +1,6 @@
 # Table Component Library
 
-A comprehensive, type-safe table system with built-in sorting, search, pagination, and loading states.
+A comprehensive, type-safe table system with built-in search, pagination, and loading states.
 
 ## Features
 
@@ -32,7 +32,6 @@ function InvoiceTable() {
         {
           id: "number",
           header: "Invoice #",
-          sortable: true,
           cell: (invoice) => (
             <a href={`/invoices/${invoice.id}`} className="underline">
               {invoice.number}
@@ -47,14 +46,12 @@ function InvoiceTable() {
         {
           id: "date",
           header: "Date",
-          sortable: true,
           cell: (invoice) => <FormattedDate date={invoice.date} />,
         },
         {
           id: "total",
           header: "Total",
           align: "right",
-          sortable: true,
           cell: (invoice) => `$${invoice.total}`,
         },
       ]}
@@ -81,17 +78,12 @@ function InvoiceTable() {
   return (
     <DataTable<Invoice>
       columns={[
-        { field: "number", header: "Number", sortable: true },
-        { field: "customer", header: "Customer" },
-        { field: "date", header: "Date", sortable: true },
-        { field: "total", header: "Total", sortable: true, align: "right" },
+        { id: "number", header: "Number" },
+        { id: "customer", header: "Customer" },
+        { id: "date", header: "Date" },
+        { id: "total", header: "Total", align: "right" },
       ]}
-      renderHeader={(props) => (
-        <InvoiceListHeader
-          orderBy={props.orderBy}
-          onSort={props.onSort}
-        />
-      )}
+      renderHeader={() => <InvoiceListHeader />}
       renderRow={(invoice) => (
         <InvoiceListRow
           key={invoice.id}
@@ -117,7 +109,6 @@ function InvoiceTable() {
 | `cacheKey` | `string` | Yes | Unique key for react-query cache |
 | `onFetch` | `(params) => Promise<Response>` | Yes | Data fetch function |
 | `resourceName` | `string` | Yes | Resource name for empty states |
-| `defaultOrderBy` | `string` | No | Default sort order (e.g., "-id") |
 | `queryParams` | `TableQueryParams` | No | External query parameters |
 | `onChangeParams` | `(params) => void` | No | Callback for param changes |
 | `entityId` | `string` | No | Entity ID for multi-tenant filtering |
@@ -125,7 +116,7 @@ function InvoiceTable() {
 | `createNewTrigger` | `ReactNode` | No | Custom create action |
 | `onRowClick` | `(item: T) => void` | No | Row click handler |
 | `renderRow` | `(item: T) => ReactNode` | No | Custom row renderer |
-| `renderHeader` | `(props) => ReactNode` | No | Custom header renderer |
+| `renderHeader` | `() => ReactNode` | No | Custom header renderer |
 
 ### Column Definition
 
@@ -133,8 +124,6 @@ function InvoiceTable() {
 type Column<T> = {
   id: string;                    // Unique column identifier
   header: ReactNode;             // Header label or component
-  sortField?: string;            // Field name for sorting (if different from id)
-  sortable?: boolean;            // Enable sorting
   align?: "left" | "center" | "right"; // Text alignment
   cell?: (item: T) => ReactNode; // Cell renderer function
   className?: string;            // Optional CSS classes
@@ -150,9 +139,8 @@ Manages table state internally with optional URL sync:
 ```tsx
 import { useTableState } from "@space-invoices/ui";
 
-const { params, handleSort, handleSearch, handlePageChange } = useTableState({
-  initialParams: { order_by: "-created_at" },
-  defaultOrderBy: "-id",
+const { params, handleSearch, handlePageChange } = useTableState({
+  initialParams: {},
   onChangeParams: (params) => {
     // Optional: sync with router or external state
     navigate({ search: params });
@@ -170,7 +158,7 @@ import { useTableQuery } from "@space-invoices/ui";
 const { data, isFetching } = useTableQuery({
   cacheKey: "customers",
   fetchFn: (params) => sdk.customers.getCustomers(params),
-  params: { order_by: "-id", search: "acme" },
+  params: { search: "acme" },
   entityId: "entity-123",
 });
 ```
@@ -203,21 +191,6 @@ Search input with optional debouncing:
 />
 ```
 
-### SortableHeader
-
-Sortable column header with visual indicators:
-
-```tsx
-<SortableHeader
-  field="name"
-  currentOrder="-name"
-  onSort={(order) => console.log(order)}
-  align="left"
->
-  Customer Name
-</SortableHeader>
-```
-
 ### Pagination
 
 Cursor-based pagination controls:
@@ -259,7 +232,6 @@ For straightforward tables, define columns with cell renderers:
     {
       id: "name",
       header: "Name",
-      sortable: true,
       cell: (item) => item.name,
     },
     {
@@ -281,14 +253,14 @@ For advanced tables with complex row/header components:
 ```tsx
 <DataTable
   columns={[
-    { id: "name", header: "Name", sortable: true },
+    { id: "name", header: "Name" },
     { id: "email", header: "Email" },
   ]}
   renderRow={(item) => (
     <CustomRow key={item.id} item={item} />
   )}
-  renderHeader={(props) => (
-    <CustomHeader {...props} />
+  renderHeader={() => (
+    <CustomHeader />
   )}
   cacheKey="users"
   resourceName="user"
@@ -296,84 +268,6 @@ For advanced tables with complex row/header components:
 />
 ```
 
-## Key Improvements
-
-### 1. Simplified State Management
-
-**Before:**
-- Manual `useState` for params
-- Manual URL sync with `updateQueryParams`
-- Complex callback chains
-
-**After:**
-- `useTableState` hook handles everything
-- Automatic URL sync
-- Single source of truth
-
-### 2. Cleaner Hooks
-
-**Before:**
-```tsx
-const { data, isFetching } = useTableQuery({
-  cacheKey,
-  fetchFn,
-  params,
-  entityId,
-});
-
-// Unnecessary isMounted ref logic
-const isMounted = useRef(true);
-```
-
-**After:**
-```tsx
-// Simplified, no ref needed
-const { data, isFetching } = useTableQuery({
-  cacheKey,
-  fetchFn,
-  params,
-  entityId,
-});
-```
-
-### 3. Better Column API
-
-**Before:**
-- Column definitions not used for rendering
-- Must implement custom row/header components
-
-**After:**
-- Column definitions drive rendering
-- Optional custom renderers for flexibility
-- Built-in cell renderers via `cell` prop
-
-### 4. Improved Type Safety
-
-**Before:**
-```typescript
-// Loose typing on columns
-columns: { field: string; header: React.ReactNode }[]
-```
-
-**After:**
-```typescript
-// Strongly typed with generics
-columns: Column<T>[]
-// T is your data type (e.g., Invoice, Customer)
-```
-
-### 5. Better UX
-
-**Before:**
-- Basic search input
-- Minimal empty states
-
-**After:**
-- Search with clear button
-- Rich empty states with icons
-- Better error handling in date formatter
-- Improved accessibility
-
 ## Best Practices
 
 1. **Use column definitions for simple tables**: Less code, easier to maintain
@@ -382,8 +276,7 @@ columns: Column<T>[]
 4. **Handle loading states**: The component handles this automatically
 5. **Provide meaningful resource names**: Used in empty states
 6. **Use FormattedDate**: Consistent date formatting with error handling
-7. **Enable sorting selectively**: Not all columns need sorting
-8. **Use proper TypeScript types**: Import from `@spaceinvoices/js-sdk`
+7. **Use proper TypeScript types**: Import from `@spaceinvoices/js-sdk`
 
 ## Testing
 

package/src/components/table/data-table.tsx

@@ -6,7 +6,6 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
 import { FilterBar } from "./filter-bar";
 import { useTableQuery } from "./hooks/use-table-query";
 import { useTableState } from "./hooks/use-table-state";
-import { SortableHeader } from "./sortable-header";
 import { TableEmptyState } from "./table-empty-state";
 import { TableNoResults } from "./table-no-results";
 import { Pagination } from "./table-pagination";
@@ -22,8 +21,6 @@ export type DataTableProps<T> = {
   onFetch: (params: TableQueryParams) => Promise<TableQueryResponse<T>>;
   /** Resource name for empty states (e.g., "customer", "invoice") */
   resourceName: string;
-  /** Default sort order (e.g., "-id", "name") */
-  defaultOrderBy?: string;
   /** Initial/external query parameters */
   queryParams?: TableQueryParams;
   /** Callback when params change (for external state management) */
@@ -36,12 +33,14 @@ export type DataTableProps<T> = {
   createNewLink?: string;
   /** Custom trigger for create action */
   createNewTrigger?: ReactNode;
+  /** Callback for "Create new" click — enables client-side navigation instead of full page reload */
+  onCreateNew?: () => void;
   /** Optional row click handler */
   onRowClick?: (item: T) => void;
   /** Custom row renderer (overrides default cell rendering) */
   renderRow?: (item: T) => ReactNode;
   /** Custom header renderer (overrides default header) */
-  renderHeader?: (props: { orderBy?: string; onSort?: (order: string | null) => void }) => ReactNode;
+  renderHeader?: () => ReactNode;
   /** Filter configuration (date fields, status filter) */
   filterConfig?: FilterConfig;
   /** Translation function */
@@ -55,7 +54,7 @@ export type DataTableProps<T> = {
   /** Callback when selection changes */
   onSelectionChange?: (selectedIds: Set<string>) => void;
   /** Content to render in selection toolbar (shown when items selected) */
-  selectionToolbar?: (selectedCount: number) => ReactNode;
+  selectionToolbar?: (selectedCount: number, data: T[]) => ReactNode;
 };
 
 /**
@@ -66,13 +65,13 @@ export function DataTable<T extends { id: string }>({
   cacheKey,
   onFetch,
   resourceName,
-  defaultOrderBy = "-id",
   queryParams,
   onChangeParams,
   disableUrlSync,
   entityId,
   createNewLink,
   createNewTrigger,
+  onCreateNew,
   onRowClick,
   renderRow,
   renderHeader,
@@ -94,14 +93,12 @@ export function DataTable<T extends { id: string }>({
   );
   const [filterPanelOpen, setFilterPanelOpen] = useState(hasInitialFilters);
 
-  // Manage table state (sort, search, pagination, filters)
-  const { params, apiParams, filterState, handleSort, handleSearch, handlePageChange, handleFilterChange } =
-    useTableState({
-      initialParams: queryParams,
-      defaultOrderBy,
-      onChangeParams,
-      disableUrlSync,
-    });
+  // Manage table state (search, pagination, filters)
+  const { params, apiParams, filterState, handleSearch, handlePageChange, handleFilterChange } = useTableState({
+    initialParams: queryParams,
+    onChangeParams,
+    disableUrlSync,
+  });
 
   // Fetch table data (use apiParams which has the query JSON for API)
   const { data: queryResult, isFetching } = useTableQuery<T>({
@@ -121,6 +118,12 @@ export function DataTable<T extends { id: string }>({
       params.filter_http_status,
   );
 
+  // Combined clear handler for both search and filters
+  const handleClearAll = useCallback(() => {
+    handleSearch(null);
+    handleFilterChange(null);
+  }, [handleSearch, handleFilterChange]);
+
   // Selection helpers
   const pageIds = useMemo(() => data.map((item) => item.id), [data]);
   const selectedCount = selectedIds?.size ?? 0;
@@ -186,6 +189,7 @@ export function DataTable<T extends { id: string }>({
         resource={resourceName}
         createNewLink={createNewLink}
         createNewTrigger={createNewTrigger}
+        onCreateNew={onCreateNew}
         t={t}
       />
     );
@@ -207,19 +211,17 @@ export function DataTable<T extends { id: string }>({
 
       {selectable && selectedCount > 0 && selectionToolbar && (
         <div className="flex items-center gap-3 rounded-lg border bg-muted/50 px-4 py-2">
-          {selectionToolbar(selectedCount)}
+          {selectionToolbar(selectedCount, data)}
         </div>
       )}
 
       <div className="rounded-lg border">
         <Table>
           {renderHeader ? (
-            renderHeader({ orderBy: params.order_by, onSort: handleSort })
+            renderHeader()
           ) : (
             <DefaultTableHeader
               columns={columns}
-              orderBy={params.order_by}
-              onSort={handleSort}
               selectable={selectable}
               allPageSelected={allPageSelected}
               somePageSelected={somePageSelected}
@@ -249,7 +251,7 @@ export function DataTable<T extends { id: string }>({
                 );
               })
             ) : (
-              <TableNoResults resource={resourceName} search={handleSearch} t={t} />
+              <TableNoResults resource={resourceName} search={handleSearch} onClear={handleClearAll} t={t} />
             )}
           </TableBody>
         </Table>
@@ -271,16 +273,12 @@ export function DataTable<T extends { id: string }>({
  */
 const DefaultTableHeader = memo(function DefaultTableHeader<T>({
   columns,
-  orderBy,
-  onSort,
   selectable,
   allPageSelected,
   somePageSelected,
   onToggleAll,
 }: {
   columns: Column<T>[];
-  orderBy?: string;
-  onSort?: (order: string | null) => void;
   selectable?: boolean;
   allPageSelected?: boolean;
   somePageSelected?: boolean;
@@ -300,18 +298,7 @@ const DefaultTableHeader = memo(function DefaultTableHeader<T>({
         )}
         {columns.map((column) => (
           <TableHead key={column.id} className={column.className} style={{ textAlign: column.align }}>
-            {column.sortable ? (
-              <SortableHeader
-                field={column.sortField ?? column.id}
-                currentOrder={orderBy}
-                onSort={onSort}
-                align={column.align}
-              >
-                {column.header}
-              </SortableHeader>
-            ) : (
-              column.header
-            )}
+            {column.header}
           </TableHead>
         ))}
       </TableRow>
@@ -319,8 +306,6 @@ const DefaultTableHeader = memo(function DefaultTableHeader<T>({
   );
 }) as <T>(props: {
   columns: Column<T>[];
-  orderBy?: string;
-  onSort?: (order: string | null) => void;
   selectable?: boolean;
   allPageSelected?: boolean;
   somePageSelected?: boolean;

package/src/components/table/hooks/use-table-state.ts

@@ -3,7 +3,6 @@ import type { FilterState, HttpMethodFilter, HttpStatusCodeFilter, StatusFilter,
 
 type UseTableStateProps = {
   initialParams?: TableQueryParams;
-  defaultOrderBy?: string;
   onChangeParams?: (params: TableQueryParams) => void;
   /** When true, disables URL sync entirely (for embedded tables like dashboard) */
   disableUrlSync?: boolean;
@@ -115,17 +114,11 @@ export function buildQueryFromFilterState(state: FilterState | null): string | u
 }
 
 /**
- * Manages table state (sorting, search, pagination) with optional URL sync
+ * Manages table state (search, pagination, filters) with optional URL sync
  */
-export function useTableState({
-  initialParams = {},
-  defaultOrderBy = "-id",
-  onChangeParams,
-  disableUrlSync = false,
-}: UseTableStateProps) {
+export function useTableState({ initialParams = {}, onChangeParams, disableUrlSync = false }: UseTableStateProps) {
   const [params, setParams] = useState<TableQueryParams>({
     ...initialParams,
-    order_by: initialParams.order_by ?? defaultOrderBy,
   });
 
   // Use ref for onChangeParams to keep it stable
@@ -147,10 +140,9 @@ export function useTableState({
       isUpdatingFromInitialRef.current = true;
       setParams({
         ...initialParams,
-        order_by: initialParams.order_by ?? defaultOrderBy,
       });
     }
-  }, [initialParams, defaultOrderBy]);
+  }, [initialParams]);
 
   // Sync params to parent or URL when they change
   useEffect(() => {
@@ -185,21 +177,6 @@ export function useTableState({
     }
   }, [params, disableUrlSync]);
 
-  /**
-   * Handle sort change
-   */
-  const handleSort = useCallback(
-    (order: string | null) => {
-      setParams((prevParams) => ({
-        ...prevParams,
-        order_by: order ?? defaultOrderBy,
-        prev_cursor: undefined,
-        next_cursor: undefined,
-      }));
-    },
-    [defaultOrderBy],
-  );
-
   /**
    * Handle search change
    */
@@ -285,7 +262,6 @@ export function useTableState({
     params,
     apiParams,
     filterState,
-    handleSort,
     handleSearch,
     handlePageChange,
     handleFilterChange,

package/src/components/table/index.ts

@@ -2,7 +2,6 @@
  * Table Component Library
  *
  * A comprehensive, type-safe table system with built-in:
- * - Sorting (client and server-side)
  * - Search/filtering
  * - Cursor-based pagination
  * - Loading states
@@ -20,7 +19,6 @@ export { useTableQuery } from "./hooks/use-table-query";
 export { useTableState } from "./hooks/use-table-state";
 // Supporting components
 export { SearchInput } from "./search-input";
-export { SortableHeader } from "./sortable-header";
 export { TableEmptyState } from "./table-empty-state";
 export { TableNoResults } from "./table-no-results";
 export { Pagination } from "./table-pagination";

package/src/components/table/search-input.tsx

@@ -16,6 +16,7 @@ type SearchInputProps = {
  */
 export function SearchInput({ initialValue = "", onSearch, placeholder = "Search...", debounceMs }: SearchInputProps) {
   const [value, setValue] = useState(initialValue);
+  const [isFocused, setIsFocused] = useState(false);
 
   // Use ref to keep onSearch stable in useEffect
   const onSearchRef = useRef(onSearch);
@@ -56,6 +57,9 @@ export function SearchInput({ initialValue = "", onSearch, placeholder = "Search
     onSearchRef.current(null);
   }, []);
 
+  // Show "Enter ↵" hint when input requires Enter to search (no debounce) and user is typing
+  const showEnterHint = debounceMs === undefined && value && isFocused;
+
   return (
     <form onSubmit={handleSubmit} className="relative inline-block" data-testid="search-form">
       <Search className="pointer-events-none absolute top-1/2 left-2.5 z-10 h-3 w-3 -translate-y-1/2 text-muted-foreground" />
@@ -66,8 +70,21 @@ export function SearchInput({ initialValue = "", onSearch, placeholder = "Search
         placeholder={placeholder}
         value={value}
         onChange={handleChange}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
         className="h-8 w-[150px] pr-8 pl-8 lg:w-[250px] [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden"
       />
+      {/* Overlay that mirrors input padding to position hint right after typed text */}
+      {showEnterHint && (
+        <span
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 flex items-center overflow-hidden pl-8 text-sm"
+        >
+          {/* Invisible text matching input value to push hint to the right */}
+          <span className="invisible whitespace-pre">{value}</span>
+          <span className="ml-1.5 shrink-0 text-muted-foreground/50 text-xs">Enter &crarr;</span>
+        </span>
+      )}
       {value && (
         <Button
           type="button"

package/src/components/table/selection-toolbar.tsx

@@ -1,9 +1,14 @@
-import { FileDown, X } from "lucide-react";
+import { FileDown, FileText, RefreshCw, X } from "lucide-react";
 import { Button } from "@/ui/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
 
 type SelectionToolbarProps = {
   selectedCount: number;
   onExportPdfs?: () => void;
+  onCopyToInvoice?: () => void;
+  onRetryFiscalization?: () => void;
+  retryFiscalizationDisabled?: boolean;
+  retryFiscalizationTooltip?: string;
   onDeselectAll?: () => void;
   t?: (key: string) => string;
 };
@@ -11,6 +16,10 @@ type SelectionToolbarProps = {
 export function SelectionToolbar({
   selectedCount,
   onExportPdfs,
+  onCopyToInvoice,
+  onRetryFiscalization,
+  retryFiscalizationDisabled,
+  retryFiscalizationTooltip,
   onDeselectAll,
   t = (key) => key,
 }: SelectionToolbarProps) {
@@ -25,6 +34,31 @@ export function SelectionToolbar({
           {t("Export PDFs")}
         </Button>
       )}
+      {onCopyToInvoice && (
+        <Button variant="outline" size="sm" onClick={onCopyToInvoice}>
+          <FileText className="mr-1.5 size-4" />
+          {t("Copy to Invoice")}
+        </Button>
+      )}
+      {onRetryFiscalization &&
+        (retryFiscalizationDisabled && retryFiscalizationTooltip ? (
+          <Tooltip>
+            <TooltipTrigger>
+              <span>
+                <Button variant="outline" size="sm" disabled>
+                  <RefreshCw className="mr-1.5 size-4" />
+                  {t("Retry Fiscalization")}
+                </Button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>{retryFiscalizationTooltip}</TooltipContent>
+          </Tooltip>
+        ) : (
+          <Button variant="outline" size="sm" onClick={onRetryFiscalization}>
+            <RefreshCw className="mr-1.5 size-4" />
+            {t("Retry Fiscalization")}
+          </Button>
+        ))}
       {onDeselectAll && (
         <Button variant="ghost" size="sm" onClick={onDeselectAll}>
           <X className="mr-1.5 size-4" />

package/src/components/table/table-empty-state.tsx

@@ -6,6 +6,8 @@ type TableEmptyStateProps = {
   resource: string;
   createNewLink?: string;
   createNewTrigger?: React.ReactNode;
+  /** Callback for "Create new" click — enables client-side navigation instead of full page reload */
+  onCreateNew?: () => void;
   /** Number of rows to calculate height (default: 10) */
   rows?: number;
   /** Translation function */
@@ -21,6 +23,7 @@ const ROW_HEIGHT = 53;
 export function TableEmptyState({
   createNewLink,
   createNewTrigger,
+  onCreateNew,
   rows = 10,
   t = (key) => key,
 }: TableEmptyStateProps) {
@@ -32,13 +35,13 @@ export function TableEmptyState({
       <Sprout size={70} strokeWidth={0.35} className="text-muted-foreground" />
       <div className="space-y-1 text-center">
         <p className="font-light text-lg text-muted-foreground">{t("Your list is empty")}</p>
-        {(createNewLink || createNewTrigger) && (
+        {(createNewLink || createNewTrigger || onCreateNew) && (
           <p className="text-muted-foreground text-sm">{t("Get started by creating your first entry")}</p>
         )}
       </div>
       {createNewLink && (
-        <Button variant="default" size="sm" asChild>
-          <a href={createNewLink}>{t("Create new")}</a>
+        <Button variant="default" size="sm" {...(onCreateNew ? { onClick: onCreateNew } : { asChild: true })}>
+          {onCreateNew ? t("Create new") : <a href={createNewLink}>{t("Create new")}</a>}
         </Button>
       )}
       {createNewTrigger && !createNewLink && <div>{createNewTrigger}</div>}

package/src/components/table/table-no-results.tsx

@@ -6,6 +6,8 @@ import { TableCell, TableRow } from "@/ui/components/ui/table";
 type TableNoResultsProps = {
   resource: string;
   search?: (value: null) => void;
+  /** Combined clear handler for both search and filters */
+  onClear?: () => void;
   /** Number of rows to calculate height (default: 10) */
   rows?: number;
   /** Translation function */
@@ -18,10 +20,13 @@ const ROW_HEIGHT = 53;
 /**
  * No results message shown when search returns empty
  */
-export function TableNoResults({ search, rows = 10, t = (key) => key }: TableNoResultsProps) {
+export function TableNoResults({ search, onClear, rows = 10, t = (key) => key }: TableNoResultsProps) {
   // Calculate height based on row count (min 150px)
   const height = Math.max(rows * ROW_HEIGHT, 150);
 
+  const handleClear = onClear ?? (search ? () => search(null) : undefined);
+  const clearLabel = onClear ? t("Clear all") : t("Clear search");
+
   return (
     <TableRow className="hover:bg-transparent">
       <TableCell colSpan={100} className="text-center align-middle" style={{ height }}>
@@ -29,11 +34,11 @@ export function TableNoResults({ search, rows = 10, t = (key) => key }: TableNoR
           <FileX size={32} strokeWidth={1.5} className="text-muted-foreground" />
           <div className="space-y-1">
             <p className="font-medium text-muted-foreground">{t("No results found")}</p>
-            {search && <p className="text-muted-foreground text-sm">{t("Try adjusting your search criteria")}</p>}
+            {handleClear && <p className="text-muted-foreground text-sm">{t("Try adjusting your search criteria")}</p>}
           </div>
-          {search && (
-            <Button variant="link" size="sm" onClick={() => search(null)} className="underline">
-              {t("Clear search")}
+          {handleClear && (
+            <Button variant="link" size="sm" onClick={handleClear} className="underline">
+              {clearLabel}
             </Button>
           )}
         </div>

package/src/components/table/types.ts

@@ -10,10 +10,6 @@ export type Column<T> = {
   header: ReactNode;
   /** Cell renderer function - returns content for each row. Optional when using renderRow. */
   cell?: (item: T) => ReactNode;
-  /** Field name for sorting (if different from id) */
-  sortField?: string;
-  /** Whether this column is sortable */
-  sortable?: boolean;
   /** Text alignment */
   align?: "left" | "center" | "right";
   /** Optional CSS class for the column */
@@ -24,7 +20,6 @@ export type Column<T> = {
  * Query parameters for table data fetching
  */
 export type TableQueryParams = {
-  order_by?: string;
   search?: string;
   prev_cursor?: string;
   next_cursor?: string;