@liguelead/design-system 0.0.33 → 0.0.35

package/components/Table/components/TableHeader/TableHeader.tsx

@@ -12,6 +12,7 @@ interface TableHeaderProps<TData> {
     onFilterPopoverOpenChange: (colId: string, isOpen: boolean) => void
     onFilterValueChange: (colId: string, value: any) => void
     onClearFilter: (colId: string) => void
+    onNumberSort: (colId: string, direction: 'asc' | 'desc' | null) => void
     labels?: DatatableFilterDropdownLabels
 }
 
@@ -23,6 +24,7 @@ function TableHeader<TData>({
     onFilterPopoverOpenChange,
     onFilterValueChange,
     onClearFilter,
+    onNumberSort,
     labels = {},
 }: TableHeaderProps<TData>) {
     return (
@@ -39,7 +41,8 @@ function TableHeader<TData>({
                             (colFilterValue.type === 'select' && colFilterValue.value != null) ||
                             (colFilterValue.type === 'dateRange' && (
                                 colFilterValue.value.from != null || colFilterValue.value.to != null
-                            ))
+                            )) ||
+                            (colFilterValue.type === 'numberSort' && colFilterValue.value != null)
                         )
 
                         return (
@@ -73,6 +76,7 @@ function TableHeader<TData>({
                                         filterValue={datatableFilters[header.column.id]}
                                         onFilterValueChange={onFilterValueChange}
                                         onClearFilter={onClearFilter}
+                                        onNumberSort={onNumberSort}
                                         labels={labels}
                                     />
                                 ) : (

package/components/Table/hooks/useDatatableFilters.ts

@@ -9,12 +9,14 @@ interface UseDatatableFiltersProps {
     isServerMode: boolean
     controlled?: DatatableColumnFilters
     onChange?: (next: DatatableColumnFilters) => void
+    onClearSorting?: (colId: string) => void
 }
 
 export function useDatatableFilters({
     isServerMode,
     controlled,
     onChange,
+    onClearSorting,
 }: UseDatatableFiltersProps) {
     const isControlled = controlled !== undefined
     const [internal, setInternal] = useState<DatatableColumnFilters>({})
@@ -42,18 +44,21 @@ export function useDatatableFilters({
                 const { from, to } = value.value
                 return from || to ? [...rest, { id: colId, value: { from, to } }] : rest
             }
+            // numberSort does not use columnFilters — handled via sorting state
             return rest
         })
     }, [filters, isServerMode, updateFilters])
 
     const handleClearColumnFilter = useCallback((colId: string) => {
+        const prev = filters[colId]
         const next = { ...filters }
         delete next[colId]
         updateFilters(next)
         setColumnFilters((prev) => prev.filter((f) => f.id !== colId))
         if (openFilterColumnId === colId) setOpenFilterColumnId(null)
-    }, [filters, openFilterColumnId, updateFilters])
-
+        // if clearing a numberSort column, also clear the table sorting
+        if (prev?.type === 'numberSort') onClearSorting?.(colId)
+    }, [filters, openFilterColumnId, updateFilters, onClearSorting])
     const handleClearAllFilters = useCallback((onClearGlobal: () => void) => {
         onClearGlobal()
         setColumnFilters([])
@@ -71,6 +76,7 @@ export function useDatatableFilters({
         if (v.type === 'text') return v.value !== ''
         if (v.type === 'select') return v.value != null
         if (v.type === 'dateRange') return v.value.from != null || v.value.to != null
+        if (v.type === 'numberSort') return v.value != null
         return false
     }, [filters])
 

package/components/Table/stories.fixtures.ts

@@ -1,5 +1,6 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { DatatableColumnMeta } from './Table.types'
+import { currencySortingFn } from './utils'
 
 export type OrderRow = {
     id: string
@@ -82,10 +83,10 @@ export const DATATABLE_COLUMNS: ColumnDef<OrderRow, unknown>[] = [
     { 
         header: 'Valor', 
         accessorKey: 'amount',
+        sortingFn: currencySortingFn,
         meta: {
-            filterType: 'text',
+            filterType: 'numberSort',
             filterLabel: 'valor',
-            filterPlaceholder: 'Buscar pelo valor',
         } satisfies DatatableColumnMeta,
     },
     {

package/components/Table/utils/currencySortingFn.ts

@@ -0,0 +1,20 @@
+import { Row } from '@tanstack/react-table'
+
+const parseNumericValue = (raw: unknown): number => {
+    if (typeof raw === 'number') return raw
+    if (typeof raw !== 'string') return 0
+    const cleaned = raw.replace(/[^\d,.-]/g, '').replace(/\.(?=\d{3})/g, '').replace(',', '.')
+    return parseFloat(cleaned) || 0
+}
+
+export const currencySortingFn = <TData>(
+    rowA: Row<TData>,
+    rowB: Row<TData>,
+    columnId: string
+): number => {
+    const a = parseNumericValue(rowA.getValue(columnId))
+    const b = parseNumericValue(rowB.getValue(columnId))
+    return a - b
+}
+
+currencySortingFn.autoRemove = (val: unknown) => val == null

package/components/Table/utils/index.ts

@@ -1,2 +1,3 @@
 export { default as getPageNumbers } from './getPageNumbers'
 export { dateRangeFilterFn } from './dateRangeFilterFn'
+export { currencySortingFn } from './currencySortingFn'

package/components/index.ts

@@ -18,5 +18,6 @@ export { default as RadioButton } from './RadioButton'
 export { ToastProvider, Toaster } from './Toaster'
 export { default as Dialog } from './Dialog'
 export { Combobox } from './Combobox'
+export { default as SplitButton } from './SplitButton'
 export { default as Table } from './Table'
 export { default as Tabs } from './Tabs'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@liguelead/design-system",
-    "version": "0.0.33",
+    "version": "0.0.35",
     "type": "module",
     "main": "components/index.ts",
     "publishConfig": {