Build a Finance SaaS Platform -10 (Data Table Action)

日常练习
Word count: 730   |   Reading time≈ 4 min

Add Pagenation

Modify components/data-table.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
...
import {
...
  getPaginationRowModel,
...
} from "@tanstack/react-table"
...
...
const table = useReactTable({
...
    getPaginationRowModel: getPaginationRowModel(),
...
  })
...
return (
    <div>
      <div className="rounded-md border">
        ...
      </div>
      <div className="flex items-center justify-end space-x-2 py-4">
        <Button
          variant="outline"
          size="sm"
          onClick={() => table.previousPage()}
          disabled={!table.getCanPreviousPage()}
        >
          Previous
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => table.nextPage()}
          disabled={!table.getCanNextPage()}
        >
          Next
        </Button>
      </div>
    </div>
  )
...

Add Sorting

Modify components/data-table.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
...
import {
...
  SortingState,
..
  getSortedRowModel,
...
} from "@tanstack/react-table"
...
...
export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const [sorting, setSorting] = React.useState<SortingState>([]);
...
  const table = useReactTable({
...
    onSortingChange: setSorting,
    getSortedRowModel: getSortedRowModel(),
    state: {
      sorting,
    },
   })
...

Modify app/(dashboard)/accounts/columns.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export const columns: ColumnDef<Payment>[] = [
...
  {
    accessorKey: "email",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Email
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      )
    },
  },
...
]

Add Filter

Modify components/data-table.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
...
import {
...
  ColumnFiltersState,
..
  getFilteredRowModel,
...
} from "@tanstack/react-table"
...
export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
...
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
...
  const table = useReactTable({
...
   onColumnFiltersChange: setColumnFilters,
    getFilteredRowModel: getFilteredRowModel(),
    state: {
      sorting,
    },
   })
...
...
return (
    <div>
	    <div className="flex items-center py-4">
        <Input
          placeholder="Filter emails..."
          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
          onChange={(event) =>
            table.getColumn("email")?.setFilterValue(event.target.value)
          }
          className="max-w-sm"
        />
      </div>
      <div className="rounded-md border">
        ...

Add filterkey

Modify components/data-table.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
...
interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
  filterKey: string
}

export function DataTable<TData, TValue>({
  columns,
  data,
  filterKey,
}: DataTableProps<TData, TValue>) {
...

...
<Input
          placeholder={`Filter ${filterKey} ...`}
          value={(table.getColumn(filterKey)?.getFilterValue() as string) ?? ""}
          onChange={(event) =>
            table.getColumn(filterKey)?.setFilterValue(event.target.value)
          }
          className="max-w-sm"
        />
 ...

Modify app/(dashboard)/accounts/page.tsx

1
2
3
4
5
6
7
8
9
10
...
        <CardContent>
          <DataTable 
            filterKey = "email"
            columns={columns} 
            data={data} 
          />
        </CardContent>
...

Row Selection

Modify app/(dashboard)/accounts/columns.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
...
export const columns: ColumnDef<Payment>[] = [
  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },
...

modify components/data-table.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
...
export function DataTable<TData, TValue>({
  columns,
  data,
  filterKey,
}: DataTableProps<TData, TValue>) {
...
  const [rowSelection, setRowSelection] = React.useState({})

const table = useReactTable({
...
    onRowSelectionChange: setRowSelection,
    state: {
      sorting,
      columnFilters,
      rowSelection,
    },
...
        <div className="flex-1 text-sm text-muted-foreground">
          {table.getFilteredSelectedRowModel().rows.length} of{" "}
          {table.getFilteredRowModel().rows.length} row(s) selected.
        </div>
        <Button
          variant="outline"
          size="sm"
          onClick={() => table.previousPage()}
          disabled={!table.getCanPreviousPage()}
        >
...

Add Delete button

modify

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div className="flex items-center py-4">
        <Input
...
        />
        { table.getFilteredSelectedRowModel().rows.length > 0 && (
          <Button 
            size="sm"
            variant="outline" 
            className="ml-auto font-normal text-xs"
          >
            <Trash className="size-4 mr-2" />
            Delete({table.getFilteredSelectedRowModel().rows.length})
          </Button>
        )}
      </div>
...

Demo

请我喝杯咖啡吧~

支付宝
微信