92 |
100 | ),
101 | filterFn: "filterRows",
102 | meta: { export: { pdf: { header: "Progress" } } },
103 | },
104 | {
105 | id: "department",
106 | accessorKey: "department",
107 | header: () => (
108 |
109 |
93 |
97 |
98 | {row.getValue("progress")}%
99 |
124 | {icons[department as keyof typeof icons]}
125 | {department}
126 |
127 | )
128 | },
129 | filterFn: "filterRows",
130 | meta: { export: { pdf: { header: "Department" } } },
131 | },
132 | {
133 | id: "createdAt",
134 | accessorKey: "createdAt",
135 | header: () => (
136 |
137 |
35 |
50 |
51 | Full Featured
52 | Sortable Columns
53 | Reorderable Rows
54 |
55 |
56 |
57 |
58 | Full Featured Table
59 |
60 | This example showcases all available features of the EnhancedTable component.
61 |
62 |
63 |
64 |
72 |
104 |
105 |
106 |
107 |
108 |
109 |
110 | Sortable Columns Table
111 |
112 | This example demonstrates a table with sortable columns without row reordering.
113 |
114 |
115 |
116 |
117 |
128 |
129 |
130 |
131 |
132 |
133 |
134 | Reorderable Rows Table
135 |
136 | This example shows a table with reorderable rows without column sorting.
137 |
138 |
139 |
140 |
141 |
152 |
153 |
154 |
155 |
156 | ) : (
157 |
160 | )
161 | }
162 |
163 | const customRowStyles = (row: Row
36 | setDataCount(Number(e.target.value))}
40 | className="w-32"
41 | />
42 |
43 |
46 |
47 |
48 | {!isLoading ? (
49 |
73 |
96 |
74 |
89 |
90 |
95 |
97 |
98 |
101 |
102 |
118 |
120 |
121 |
122 |
125 |
126 |
142 |
144 |
145 |
146 |
149 |
150 |
225 | {flexRender(cell.column.columnDef.cell, cell.getContext())}
226 |
227 | {enableEditing && (
228 |
231 | )}
232 |
233 | ) : (
234 | flexRender(cell.column.columnDef.cell, cell.getContext())
235 | )}
236 |
237 | )
238 | }
239 |
--------------------------------------------------------------------------------
/src/components/enhanced-table/composition-pattern/body/row-editor.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button"
2 | import { Input } from "@/components/ui/input"
3 | import { TableCell } from "@/components/ui/table"
4 | import type { Row } from "@tanstack/react-table"
5 | import { useState } from "react"
6 | import { isSpecialId } from "../utils"
7 |
8 | interface TableRowEditorProps
44 |
47 |
50 |
51 |
28 |
32 | updateFilterValue(column.id, [
33 | e.target.value === "" ? null : Number(e.target.value),
34 | (filter.value as [number, number])?.[1],
35 | ])
36 | }
37 | className="w-[100px]"
38 | />
39 |
40 |
44 | updateFilterValue(column.id, [
45 | (filter.value as [number, number])?.[0],
46 | e.target.value === "" ? null : Number(e.target.value),
47 | ])
48 | }
49 | className="w-[100px]"
50 | />
51 |
52 | )
53 | }
54 | return (
55 | updateFilterValue(column.id, e.target.value === "" ? null : Number(e.target.value))}
59 | className="w-[200px]"
60 | />
61 | )
62 |
63 | case "date":
64 | if (filter.type === "dateBetween") {
65 | return (
66 |
67 | updateFilterValue(column.id, [date, (filter.value as [Date, Date])?.[1]])}
70 | />
71 |
72 | updateFilterValue(column.id, [(filter.value as [Date, Date])?.[0], date])}
75 | />
76 |
77 | )
78 | }
79 | return
104 | {table
105 | .getAllColumns()
106 | .filter((column) => column.getCanFilter())
107 | .map((column) => {
108 | const sampleValue = firstRow ? firstRow.getValue(column.id) : null
109 | const filter = filters.find((f) => f.id === column.id)
110 |
111 | const availableFilterTypes = getColumnFilterTypesByValue(sampleValue, filter?.type)
112 |
113 | const currentFilter = filters.find((f) => f.id === column.id) || {
114 | id: column.id,
115 | value: "",
116 | type: availableFilterTypes[0] ?? "contains",
117 | }
118 |
119 | return (
120 |
156 | )
157 | }
158 |
--------------------------------------------------------------------------------
/src/components/enhanced-table/composition-pattern/filters/types.ts:
--------------------------------------------------------------------------------
1 | export type FilterType =
2 | | "contains"
3 | | "equals"
4 | | "startsWith"
5 | | "endsWith"
6 | | "greaterThan"
7 | | "lessThan"
8 | | "greaterThanOrEqual"
9 | | "lessThanOrEqual"
10 | | "between"
11 | | "dateEquals"
12 | | "dateBefore"
13 | | "dateAfter"
14 | | "dateBetween"
15 |
16 | export interface ColumnFilter {
17 | id: string
18 | value: string | number | [string, string] | [number, number] | Date | [Date, Date]
19 | type: FilterType
20 | }
21 |
22 | export const filterTypes: { value: FilterType; label: string }[] = [
23 | { value: "contains", label: "Contains" },
24 | { value: "equals", label: "Equals" },
25 | { value: "startsWith", label: "Starts with" },
26 | { value: "endsWith", label: "Ends with" },
27 | { value: "greaterThan", label: "Greater than" },
28 | { value: "lessThan", label: "Less than" },
29 | { value: "greaterThanOrEqual", label: "Greater than or equal to" },
30 | { value: "lessThanOrEqual", label: "Less than or equal to" },
31 | { value: "between", label: "Between" },
32 | { value: "dateEquals", label: "Date equals" },
33 | { value: "dateBefore", label: "Date before" },
34 | { value: "dateAfter", label: "Date after" },
35 | { value: "dateBetween", label: "Date between" },
36 | ]
37 |
--------------------------------------------------------------------------------
/src/components/enhanced-table/composition-pattern/filters/utils.tsx:
--------------------------------------------------------------------------------
1 | import type { FilterFn, Row } from "@tanstack/react-table"
2 | import type { FilterType } from "./types"
3 |
4 | export const filterRows: FilterFn
121 |
122 |
123 |
153 | )
154 | })}
155 |
124 |
149 |
150 | {renderFilterInput(table, column, currentFilter, updateFilterValue)}
151 |
152 |
34 |
37 |
38 |
39 |
40 |
38 |
41 |
42 |
43 |
44 |
9 | {table
10 | .getAllColumns()
11 | .filter((column) => column.getCanFilter())
12 | .map((column) => (
13 | column.setFilterValue(event.target.value)}
18 | className="max-w-sm"
19 | />
20 | ))}
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/enhanced-table/composition-pattern/header/dropdown.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button"
2 | import {
3 | DropdownMenu,
4 | DropdownMenuContent,
5 | DropdownMenuItem,
6 | DropdownMenuSeparator,
7 | DropdownMenuTrigger,
8 | } from "@/components/ui/dropdown-menu"
9 | import { cn } from "@/lib/utils"
10 | import type { Column, ColumnDefTemplate, HeaderContext } from "@tanstack/react-table"
11 | import { ArrowDownIcon, ArrowUpIcon, ChevronUp, EyeOffIcon, XCircle } from "lucide-react"
12 |
13 | interface HeaderDropdownProps {
14 | title: ColumnDefTemplate
21 |
22 |
23 |
38 |
39 |
40 |
41 | column.toggleSorting(false)}>
42 |
45 |
46 | column.toggleSorting(true)}>
47 |
50 |
51 | column.clearSorting()}>
54 |
57 |
58 | column.toggleVisibility(false)}>
61 |
64 |
65 |
66 |
67 | )
68 | }
69 |
--------------------------------------------------------------------------------
/src/components/enhanced-table/composition-pattern/header/index.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button"
2 | import { TableHead, TableRow, TableHeader as UiTableHeader } from "@/components/ui/table"
3 | import { cn } from "@/lib/utils"
4 | import { SortableContext, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable"
5 | import { CSS } from "@dnd-kit/utilities"
6 | import { type Header, flexRender } from "@tanstack/react-table"
7 | import { ArrowUpDown, GripHorizontal } from "lucide-react"
8 | import type { CSSProperties } from "react"
9 | import { useTableContext } from "../../table-context"
10 | import { getAlignment, isSpecialId } from "../utils"
11 | import { HeaderDropdown } from "./dropdown"
12 |
13 | interface TableHeaderProps {
14 | variant?: "dropdown" | "default"
15 | }
16 |
17 | export function TableHeader({ variant = "default" }: TableHeaderProps) {
18 | const { table, enableColumnReorder, columnOrder } = useTableContext()
19 |
20 | return (
21 |
42 | {header.column.getCanSort() ? (
43 | variant === "dropdown" ? (
44 |
59 | )}
60 |
102 | {header.column.getCanSort() ? (
103 | variant === "dropdown" ? (
104 |
129 |
34 |
103 | )
104 | }
105 |
--------------------------------------------------------------------------------
/src/components/enhanced-table/composition-pattern/root.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button"
2 | import { Checkbox } from "@/components/ui/checkbox"
3 | import { cn } from "@/lib/utils"
4 | import {
5 | DndContext,
6 | type DragEndEvent,
7 | KeyboardSensor,
8 | MouseSensor,
9 | TouchSensor,
10 | closestCenter,
11 | useSensor,
12 | useSensors,
13 | } from "@dnd-kit/core"
14 | import { restrictToHorizontalAxis, restrictToVerticalAxis } from "@dnd-kit/modifiers"
15 | import { arrayMove, useSortable } from "@dnd-kit/sortable"
16 | import {
17 | type ColumnDef,
18 | type ColumnFiltersState,
19 | type ExpandedState,
20 | type PaginationState,
21 | type RowSelectionState,
22 | type SortingState,
23 | getCoreRowModel,
24 | getExpandedRowModel,
25 | getFilteredRowModel,
26 | getPaginationRowModel,
27 | getSortedRowModel,
28 | useReactTable,
29 | } from "@tanstack/react-table"
30 | import { ChevronDown, ChevronRight, GripVertical } from "lucide-react"
31 | import React from "react"
32 | import { TableProvider } from "../table-context"
33 | import { filterRows } from "./filters/utils"
34 | import type { TableRootProps } from "./types"
35 | import { isSpecialId } from "./utils"
36 |
37 | export function TableRoot
35 | {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.
36 |
37 |
38 |
39 |
102 |
40 |
60 |
61 | {enableGoToPage && (
62 | Rows per page
41 | 59 |
63 |
78 | )}
79 |
80 |
64 | Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
65 |
66 |
67 |
77 |
81 |
90 |
91 |
100 |
101 |
81 | table.toggleAllPageRowsSelected(!!value)}
84 | aria-label="Select all"
85 | />
86 |
93 |
94 | ),
95 | cell: ({ row }) => (
96 |
97 | row.toggleSelected(!!value)}
100 | aria-label="Select row"
101 | />
102 | {row.getCanExpand() && (
103 |
106 | )}
107 |
108 | ),
109 | enableSorting: false,
110 | enableHiding: false,
111 | } as ColumnDef{children}
256 | {children}
278 | {children}
286 |
6 |
38 | )
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as AccordionPrimitive from "@radix-ui/react-accordion"
5 | import { ChevronDown } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Accordion = AccordionPrimitive.Root
10 |
11 | const AccordionItem = React.forwardRef<
12 | React.ElementRef
7 |
10 |
11 |
12 |
26 |
27 |
13 | {Array.from({ length: 5 }).map((_, i) => (
14 |
17 |
18 | {Array.from({ length: 10 }).map((_, i) => (
19 |
20 | {Array.from({ length: 5 }).map((_, j) => (
21 |
24 | ))}
25 |
28 |
37 |
31 |
36 | {children}
49 |
8 |
9 |
10 | ),
11 | )
12 | Table.displayName = "Table"
13 |
14 | const TableHeader = React.forwardRef