refactor: extract data-table components and reorganize structure (#208)

Extract redundant data table components to @/components/data-table/
and reorganize data-table component usage.

Author: satnaing

src/components/bulk-actions-toolbar.tsx …c/components/data-table/bulk-actions.tsxsrc/components/bulk-actions-toolbar.tsx renamed to src/components/data-table/bulk-actions.tsx src/components/bulk-actions-toolbar.tsx renamed to src/components/data-table/bulk-actions.tsx

@@ -11,7 +11,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip'
 
-type BulkActionsToolbarProps<TData> = {
+type DataTableBulkActionsProps<TData> = {
   table: Table<TData>
   entityName: string
   children: React.ReactNode
@@ -27,11 +27,11 @@ type BulkActionsToolbarProps<TData> = {
  * @param {React.ReactNode} props.children The action buttons to be rendered inside the toolbar.
  * @returns {React.ReactNode | null} The rendered component or null if no rows are selected.
  */
-export function BulkActionsToolbar<TData>({
+export function DataTableBulkActions<TData>({
   table,
   entityName,
   children,
-}: BulkActionsToolbarProps<TData>): React.ReactNode | null {
+}: DataTableBulkActionsProps<TData>): React.ReactNode | null {
   const selectedRows = table.getFilteredSelectedRowModel().rows
   const selectedCount = selectedRows.length
   const toolbarRef = useRef<HTMLDivElement>(null)

…/components/data-table-column-header.tsx …/components/data-table/column-header.tsxsrc/features/tasks/components/data-table-column-header.tsx renamed to src/components/data-table/column-header.tsx src/features/tasks/components/data-table-column-header.tsx renamed to src/components/data-table/column-header.tsx

@@ -0,0 +1,6 @@
+export { DataTablePagination } from './pagination'
+export { DataTableColumnHeader } from './column-header'
+export { DataTableFacetedFilter } from './faceted-filter'
+export { DataTableViewOptions } from './view-options'
+export { DataTableToolbar } from './toolbar'
+export { DataTableBulkActions } from './bulk-actions'

…components/data-table-faceted-filter.tsx …components/data-table/faceted-filter.tsxsrc/features/tasks/components/data-table-faceted-filter.tsx renamed to src/components/data-table/faceted-filter.tsx src/features/tasks/components/data-table-faceted-filter.tsx renamed to src/components/data-table/faceted-filter.tsx

@@ -0,0 +1,85 @@
+import { Cross2Icon } from '@radix-ui/react-icons'
+import { type Table } from '@tanstack/react-table'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { DataTableFacetedFilter } from './faceted-filter'
+import { DataTableViewOptions } from './view-options'
+
+type DataTableToolbarProps<TData> = {
+  table: Table<TData>
+  searchPlaceholder?: string
+  searchKey?: string
+  filters?: {
+    columnId: string
+    title: string
+    options: {
+      label: string
+      value: string
+      icon?: React.ComponentType<{ className?: string }>
+    }[]
+  }[]
+}
+
+export function DataTableToolbar<TData>({
+  table,
+  searchPlaceholder = 'Filter...',
+  searchKey,
+  filters = [],
+}: DataTableToolbarProps<TData>) {
+  const isFiltered =
+    table.getState().columnFilters.length > 0 || table.getState().globalFilter
+
+  return (
+    <div className='flex items-center justify-between'>
+      <div className='flex flex-1 flex-col-reverse items-start gap-y-2 sm:flex-row sm:items-center sm:space-x-2'>
+        {searchKey ? (
+          <Input
+            placeholder={searchPlaceholder}
+            value={
+              (table.getColumn(searchKey)?.getFilterValue() as string) ?? ''
+            }
+            onChange={(event) =>
+              table.getColumn(searchKey)?.setFilterValue(event.target.value)
+            }
+            className='h-8 w-[150px] lg:w-[250px]'
+          />
+        ) : (
+          <Input
+            placeholder={searchPlaceholder}
+            value={table.getState().globalFilter ?? ''}
+            onChange={(event) => table.setGlobalFilter(event.target.value)}
+            className='h-8 w-[150px] lg:w-[250px]'
+          />
+        )}
+        <div className='flex gap-x-2'>
+          {filters.map((filter) => {
+            const column = table.getColumn(filter.columnId)
+            if (!column) return null
+            return (
+              <DataTableFacetedFilter
+                key={filter.columnId}
+                column={column}
+                title={filter.title}
+                options={filter.options}
+              />
+            )
+          })}
+        </div>
+        {isFiltered && (
+          <Button
+            variant='ghost'
+            onClick={() => {
+              table.resetColumnFilters()
+              table.setGlobalFilter('')
+            }}
+            className='h-8 px-2 lg:px-3'
+          >
+            Reset
+            <Cross2Icon className='ms-2 h-4 w-4' />
+          </Button>
+        )}
+      </div>
+      <DataTableViewOptions table={table} />
+    </div>
+  )
+}

src/components/data-table/index.ts

@@ -15,7 +15,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
-import { BulkActionsToolbar } from '@/components/bulk-actions-toolbar'
+import { DataTableBulkActions as BulkActionsToolbar } from '@/components/data-table'
 import { priorities, statuses } from '../data/data'
 import { type Task } from '../data/schema'
 import { TasksMultiDeleteDialog } from './tasks-multi-delete-dialog'

…sks/components/data-table-pagination.tsx src/components/data-table/pagination.tsxsrc/features/tasks/components/data-table-pagination.tsx renamed to src/components/data-table/pagination.tsx src/features/tasks/components/data-table-pagination.tsx renamed to src/components/data-table/pagination.tsx

@@ -1,9 +1,9 @@
 import { type ColumnDef } from '@tanstack/react-table'
 import { Badge } from '@/components/ui/badge'
 import { Checkbox } from '@/components/ui/checkbox'
+import { DataTableColumnHeader } from '@/components/data-table'
 import { labels, priorities, statuses } from '../data/data'
 import { type Task } from '../data/schema'
-import { DataTableColumnHeader } from './data-table-column-header'
 import { DataTableRowActions } from './data-table-row-actions'
 
 export const tasksColumns: ColumnDef<Task>[] = [