Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-15 17:21:41 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: use data-table on template pages

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2025-06-05 10:53:53 +00:00
parent 9ccd8e0397
commit 9739a0ca96
10 changed files with 390 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/ui/primitives/data-table/data-table-toolbar.tsx
View File

@ -1,11 +1,11 @@
import type { Table } from '@tanstack/react-table';
import { Calendar, CircleDashedIcon, ListFilter, X, XCircle } from 'lucide-react';
import { Calendar, CircleDashedIcon, Globe, ListFilter, X, XCircle } from 'lucide-react';
import { Button } from '../button';
import { Input } from '../input';
import { DataTableFacetedFilter } from './data-table-faceted-filter';
import { DataTableSingleFilter } from './data-table-single-filter';
import { statuses, timePeriodGroups, timePeriods } from './data/data';
import { sources, statuses, timePeriodGroups, timePeriods } from './data/data';
interface DataTableToolbarProps<TData> {
table: Table<TData>;
@ -14,9 +14,12 @@ interface DataTableToolbarProps<TData> {
selectedStatusValues?: string[];
onTimePeriodFilterChange?: (values: string[]) => void;
selectedTimePeriodValues?: string[];
onSourceFilterChange?: (values: string[]) => void;
selectedSourceValues?: string[];
onResetFilters?: () => void;
isStatusFiltered?: boolean;
isTimePeriodFiltered?: boolean;
isSourceFiltered?: boolean;
}
export function DataTableToolbar<TData>({
@ -26,12 +29,18 @@ export function DataTableToolbar<TData>({
selectedStatusValues,
onTimePeriodFilterChange,
selectedTimePeriodValues,
onSourceFilterChange,
selectedSourceValues,
onResetFilters,
isStatusFiltered,
isTimePeriodFiltered,
isSourceFiltered,
}: DataTableToolbarProps<TData>) {
const isFiltered =
table.getState().columnFilters.length > 0 || isStatusFiltered || isTimePeriodFiltered;
table.getState().columnFilters.length > 0 ||
isStatusFiltered ||
isTimePeriodFiltered ||
isSourceFiltered;
const searchValue = (table.getColumn('title')?.getFilterValue() as string) ?? '';
const handleClearFilter = () => {
@ -91,6 +100,17 @@ export function DataTableToolbar<TData>({
/>
)}
{table.getColumn('source') && (
<DataTableFacetedFilter
column={table.getColumn('source')}
title="Source"
options={sources}
icon={Globe}
onFilterChange={onSourceFilterChange}
selectedValues={selectedSourceValues}
/>
)}
{isFiltered && (
<Button variant="ghost" className="h-8 gap-2" size="sm" onClick={handleReset}>
Reset