vngrup/dress
vngrup/dress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add row selection functionality to DataTable component

Browse Source
This commit is contained in:
Yoga Pangestu 2026-04-14 22:51:25 +07:00
parent c29063391f
commit 2dc311b4b5
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
resources/js/components/data-table.tsx
View File

@ -67,6 +67,8 @@ interface DataTableProps<TData, TValue> {
bulkActions?: DataTableBulkAction<TData>[]; bulkActions?: DataTableBulkAction<TData>[];
showNumbering?: boolean; showNumbering?: boolean;
showSelection?: boolean; showSelection?: boolean;
rowSelection?: any;
onRowSelectionChange?: (selection: any) => void;
} }
export function DataTable<TData, TValue>({ export function DataTable<TData, TValue>({
@ -76,11 +78,12 @@ export function DataTable<TData, TValue>({
bulkActions, bulkActions,
showNumbering = true, showNumbering = true,
showSelection = true, showSelection = true,
rowSelection = {},
onRowSelectionChange,
}: DataTableProps<TData, TValue>) { }: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = React.useState<SortingState>([]); const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]); const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({}); const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});
const [globalFilter, setGlobalFilter] = React.useState(""); const [globalFilter, setGlobalFilter] = React.useState("");
const finalColumns = React.useMemo(() => { const finalColumns = React.useMemo(() => {
@ -135,7 +138,7 @@ export function DataTable<TData, TValue>({
onColumnFiltersChange: setColumnFilters, onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(), getFilteredRowModel: getFilteredRowModel(),
onColumnVisibilityChange: setColumnVisibility, onColumnVisibilityChange: setColumnVisibility,
onRowSelectionChange: setRowSelection, onRowSelectionChange: onRowSelectionChange,
onGlobalFilterChange: setGlobalFilter, onGlobalFilterChange: setGlobalFilter,
state: { state: {
sorting, sorting,
@ -310,9 +313,6 @@ export function DataTable<TData, TValue>({
<TableCell colSpan={finalColumns.length} className="h-24 text-center"> <TableCell colSpan={finalColumns.length} className="h-24 text-center">
<Empty> <Empty>
<EmptyHeader> <EmptyHeader>
<EmptyMedia variant="icon">
<List />
</EmptyMedia>
<EmptyTitle>Ooops...</EmptyTitle> <EmptyTitle>Ooops...</EmptyTitle>
<EmptyDescription> <EmptyDescription>
Tidak ada data yang ditemukan. Tidak ada data yang ditemukan.