fix: datatable styles
This commit is contained in:
Mahyar Khanbolooki
+217
-200
@@ -1,6 +1,6 @@
|
||||
"use client"
|
||||
'use client'
|
||||
|
||||
import * as React from "react"
|
||||
import * as React from 'react'
|
||||
import {
|
||||
ColumnDef,
|
||||
ColumnFiltersState,
|
||||
@@ -11,293 +11,294 @@ import {
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table"
|
||||
useReactTable
|
||||
} from '@tanstack/react-table'
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
import clsx from "clsx"
|
||||
import { EyeToggleIcon } from "../icons/EyeToggleIcon"
|
||||
import { ArrowLeft2, ArrowRight2 } from "iconsax-react"
|
||||
TableRow
|
||||
} from '@/components/ui/table'
|
||||
import clsx from 'clsx'
|
||||
import { EyeToggleIcon } from '../icons/EyeToggleIcon'
|
||||
import { ArrowLeft2, ArrowRight2 } from 'iconsax-react'
|
||||
import { ef } from '@/lib/helpers/utfNumbers'
|
||||
|
||||
const data: Payment[] = [
|
||||
{
|
||||
id: "m5gr84i9",
|
||||
type: 'تایپ',
|
||||
id: 'm5gr84i9',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "3u1reuv4",
|
||||
type: 'تایپ',
|
||||
id: '3u1reuv4',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "derv1ws0",
|
||||
type: 'تایپ',
|
||||
id: 'derv1ws0',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: false,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "5kma53ae",
|
||||
type: 'تایپ',
|
||||
id: '5kma53ae',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "bhqecj4p",
|
||||
type: 'تایپ',
|
||||
id: 'bhqecj4p',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "m5gr84i9",
|
||||
type: 'تایپ',
|
||||
id: 'm5gr84i9',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "3u1reuv4",
|
||||
type: 'تایپ',
|
||||
id: '3u1reuv4',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "derv1ws0",
|
||||
type: 'تایپ',
|
||||
id: 'derv1ws0',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: false,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "5kma53ae",
|
||||
type: 'تایپ',
|
||||
id: '5kma53ae',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "bhqecj4p",
|
||||
type: 'تایپ',
|
||||
id: 'bhqecj4p',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "m5gr84i9",
|
||||
type: 'تایپ',
|
||||
id: 'm5gr84i9',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "3u1reuv4",
|
||||
type: 'تایپ',
|
||||
id: '3u1reuv4',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "derv1ws0",
|
||||
type: 'تایپ',
|
||||
id: 'derv1ws0',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: false,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "5kma53ae",
|
||||
type: 'تایپ',
|
||||
id: '5kma53ae',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "bhqecj4p",
|
||||
type: 'تایپ',
|
||||
id: 'bhqecj4p',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "m5gr84i9",
|
||||
type: 'تایپ',
|
||||
id: 'm5gr84i9',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "3u1reuv4",
|
||||
type: 'تایپ',
|
||||
id: '3u1reuv4',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "derv1ws0",
|
||||
type: 'تایپ',
|
||||
id: 'derv1ws0',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: false,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "5kma53ae",
|
||||
type: 'تایپ',
|
||||
id: '5kma53ae',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "bhqecj4p",
|
||||
type: 'تایپ',
|
||||
id: 'bhqecj4p',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "m5gr84i9",
|
||||
type: 'تایپ',
|
||||
id: 'm5gr84i9',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "3u1reuv4",
|
||||
type: 'تایپ',
|
||||
id: '3u1reuv4',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "derv1ws0",
|
||||
type: 'تایپ',
|
||||
id: 'derv1ws0',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: false,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "5kma53ae",
|
||||
type: 'تایپ',
|
||||
id: '5kma53ae',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "bhqecj4p",
|
||||
type: 'تایپ',
|
||||
id: 'bhqecj4p',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "m5gr84i9",
|
||||
type: 'تایپ',
|
||||
id: 'm5gr84i9',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "3u1reuv4",
|
||||
type: 'تایپ',
|
||||
id: '3u1reuv4',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "derv1ws0",
|
||||
type: 'تایپ',
|
||||
id: 'derv1ws0',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: false,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "5kma53ae",
|
||||
type: 'تایپ',
|
||||
id: '5kma53ae',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "bhqecj4p",
|
||||
type: 'تایپ',
|
||||
id: 'bhqecj4p',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "m5gr84i9",
|
||||
type: 'تایپ',
|
||||
id: 'm5gr84i9',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "3u1reuv4",
|
||||
type: 'تایپ',
|
||||
id: '3u1reuv4',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "derv1ws0",
|
||||
type: 'تایپ',
|
||||
id: 'derv1ws0',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: false,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "5kma53ae",
|
||||
type: 'تایپ',
|
||||
id: '5kma53ae',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "bhqecj4p",
|
||||
type: 'تایپ',
|
||||
id: 'bhqecj4p',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "m5gr84i9",
|
||||
type: 'تایپ',
|
||||
id: 'm5gr84i9',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "3u1reuv4",
|
||||
type: 'تایپ',
|
||||
id: '3u1reuv4',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "derv1ws0",
|
||||
type: 'تایپ',
|
||||
id: 'derv1ws0',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: false,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "5kma53ae",
|
||||
type: 'تایپ',
|
||||
id: '5kma53ae',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "bhqecj4p",
|
||||
type: 'تایپ',
|
||||
id: 'bhqecj4p',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "m5gr84i9",
|
||||
type: 'تایپ',
|
||||
id: 'm5gr84i9',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "3u1reuv4",
|
||||
type: 'تایپ',
|
||||
id: '3u1reuv4',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "derv1ws0",
|
||||
type: 'تایپ',
|
||||
id: 'derv1ws0',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: false,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "5kma53ae",
|
||||
type: 'تایپ',
|
||||
id: '5kma53ae',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
date: 14040401
|
||||
},
|
||||
{
|
||||
id: "bhqecj4p",
|
||||
type: 'تایپ',
|
||||
id: 'bhqecj4p',
|
||||
type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
|
||||
status: true,
|
||||
date: 14040401,
|
||||
},
|
||||
date: 14040401
|
||||
}
|
||||
]
|
||||
|
||||
export type Payment = {
|
||||
@@ -310,22 +311,22 @@ export type Payment = {
|
||||
|
||||
export const columns: ColumnDef<Payment>[] = [
|
||||
{
|
||||
accessorKey: "id",
|
||||
header: () => <div className="text-right pr-6">شماره</div>,
|
||||
accessorKey: 'id',
|
||||
header: () => <div className='text-right pr-6'>شماره</div>,
|
||||
cell: ({ row }) => (
|
||||
<div className="capitalize text-right pr-6">{row.getValue("id")}</div>
|
||||
),
|
||||
<div className='capitalize text-right pr-6'>{row.getValue('id')}</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
accessorKey: "type",
|
||||
header: () => "نوع تراکنش",
|
||||
cell: ({ row }) => <div className="capitalize">{row.getValue("type")}</div>,
|
||||
accessorKey: 'type',
|
||||
header: () => <div className='text-center'>نوع تراکنش</div>,
|
||||
cell: ({ row }) => <div className='capitalize'>{row.getValue('type')}</div>
|
||||
},
|
||||
{
|
||||
accessorKey: "date",
|
||||
header: () => <div className="text-center">تاریخ</div>,
|
||||
accessorKey: 'date',
|
||||
header: () => <div className='text-center'>تاریخ</div>,
|
||||
cell: ({ row }) => {
|
||||
const date = parseFloat(row.getValue("date"))
|
||||
const date = parseFloat(row.getValue('date'))
|
||||
|
||||
// Format the amount as a dollar amount
|
||||
// const formatted = new Intl.NumberFormat("en-US", {
|
||||
@@ -334,41 +335,46 @@ export const columns: ColumnDef<Payment>[] = [
|
||||
// }).format(amount)
|
||||
// TODO: convert to jalali
|
||||
|
||||
return <div className="text-center">{date}</div>
|
||||
},
|
||||
return <div className='text-center'>{date}</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: () => <div className="text-center">وضعیت</div>,
|
||||
accessorKey: 'status',
|
||||
header: () => <div className='text-center'>وضعیت</div>,
|
||||
cell: ({ row }) => {
|
||||
const status = Boolean(row.getValue("status"))
|
||||
const status = Boolean(row.getValue('status'))
|
||||
|
||||
const str = status ? 'پاسخ داده شده' : 'پاسخ داده نشده';
|
||||
const str = status ? 'پاسخ داده شده' : 'پاسخ داده نشده'
|
||||
|
||||
return (
|
||||
<div className='text-right flex items-center justify-center gap-x-2'>
|
||||
<span className={clsx('size-2 rounded-full', status ? 'bg-[#00BA4B]' : 'bg-transparent border border-primary')}></span>
|
||||
<span
|
||||
className={clsx(
|
||||
'size-2 rounded-full',
|
||||
status ? 'bg-[#00BA4B]' : 'bg-transparent border border-primary'
|
||||
)}
|
||||
></span>
|
||||
{str}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
id: 'actions',
|
||||
enableHiding: false,
|
||||
cell: ({ row }) => {
|
||||
const status = Boolean(row.getValue("status"))
|
||||
const status = Boolean(row.getValue('status'))
|
||||
|
||||
return (
|
||||
<>
|
||||
<EyeToggleIcon className="ml-6 place-self-end" slash={status} />
|
||||
<EyeToggleIcon className='ml-6 place-self-end' slash={status} />
|
||||
</>
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
export function DataTableDemo() {
|
||||
export function DataTableDemo () {
|
||||
const [sorting, setSorting] = React.useState<SortingState>([])
|
||||
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
||||
[]
|
||||
@@ -392,23 +398,26 @@ export function DataTableDemo() {
|
||||
sorting,
|
||||
columnFilters,
|
||||
columnVisibility,
|
||||
rowSelection,
|
||||
},
|
||||
rowSelection
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="rounded-3xl w-full">
|
||||
<Table className="w-[1000px]">
|
||||
<div className='w-full'>
|
||||
<div className='rounded-3xl w-full'>
|
||||
<Table className='w-[727px] md:w-full'>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
{table.getHeaderGroups().map(headerGroup => (
|
||||
<TableRow
|
||||
className="dark:border-neutral-400"
|
||||
className='dark:border-neutral-400 border-[#EAEDF5] h-14'
|
||||
key={headerGroup.id}
|
||||
>
|
||||
{headerGroup.headers.map((header) => {
|
||||
{headerGroup.headers.map(header => {
|
||||
return (
|
||||
<TableHead key={header.id} className="font-light text-xs text-disabled-text text-center">
|
||||
<TableHead
|
||||
key={header.id}
|
||||
className='font-light text-xs text-disabled-text text-center'
|
||||
>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
@@ -423,13 +432,12 @@ export function DataTableDemo() {
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows?.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
table.getRowModel().rows.map(row => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
data-state={row.getIsSelected() && "selected"}
|
||||
className="text-center w-full dark:border-background text-xs odd:bg-[#E9EBF433] dark:odd:bg-background/80 even:bg-container border-0 border-b h-14 border-r-4 border-r-transparent active:border-r-primary"
|
||||
className='text-center w-full border-b-[#EAEDF5] dark:border-b-background text-xs odd:bg-[#E9EBF433] bg-border dark:odd:bg-background/80 even:bg-container border-0 border-b! h-14 border-r-4! border-r-transparent active:border-r-primary dark:active:border-r-foreground'
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
{row.getVisibleCells().map(cell => (
|
||||
<TableCell key={cell.id}>
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
@@ -443,7 +451,7 @@ export function DataTableDemo() {
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={columns.length}
|
||||
className="h-24 text-center"
|
||||
className='h-24 text-center'
|
||||
>
|
||||
No results.
|
||||
</TableCell>
|
||||
@@ -452,50 +460,59 @@ export function DataTableDemo() {
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="flex items-center justify-end space-x-2 py-4 px-7">
|
||||
<div className="flex-1 text-sm text-disabled-text">
|
||||
نمایش: <span className="text-primary dark:text-foreground">{table.getRowModel().rows.length}</span> از {table.getFilteredRowModel().rows.length}
|
||||
<div className='flex items-center justify-end space-x-2 pt-4 px-7 pb-11'>
|
||||
<div className='flex-1 text-sm text-disabled-text'>
|
||||
نمایش:{' '}
|
||||
<span className='text-primary dark:text-foreground'>
|
||||
{ef(table.getRowModel().rows.length)}
|
||||
</span>{' '}
|
||||
از {ef(table.getFilteredRowModel().rows.length)}
|
||||
</div>
|
||||
<div className="space-x-2 justify-center flex">
|
||||
<div className='space-x-2 justify-center flex'>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
className='size-6'
|
||||
onClick={() => table.previousPage()}
|
||||
hidden={!table.getCanPreviousPage()}
|
||||
>
|
||||
<ArrowRight2 size={12} className="stroke-[#A8ABBF]" />
|
||||
<ArrowRight2 size={12} className='stroke-[#A8ABBF]' />
|
||||
</Button>
|
||||
<Button
|
||||
variant='secondary'
|
||||
size="sm"
|
||||
size='sm'
|
||||
className='dark:bg-disabled bg-[#EAECF5] text-xs size-6'
|
||||
onClick={() => table.previousPage()}
|
||||
hidden={!table.getCanPreviousPage()}
|
||||
>
|
||||
{table.getState().pagination.pageIndex}
|
||||
{ef(table.getState().pagination.pageIndex)}
|
||||
</Button>
|
||||
<Button
|
||||
variant='default'
|
||||
size="sm"
|
||||
className='text-white dark:text-foreground text-xs size-6'
|
||||
size='sm'
|
||||
hidden={!table.getCanPreviousPage() && !table.getCanNextPage()}
|
||||
>
|
||||
{table.getState().pagination.pageIndex + 1}
|
||||
{ef(table.getState().pagination.pageIndex + 1)}
|
||||
</Button>
|
||||
<Button
|
||||
variant='secondary'
|
||||
size="sm"
|
||||
size='sm'
|
||||
className='dark:bg-disabled bg-[#EAECF5] text-xs size-6'
|
||||
onClick={() => table.nextPage()}
|
||||
hidden={!table.getCanNextPage()}
|
||||
>
|
||||
{table.getState().pagination.pageIndex + 2}
|
||||
{ef(table.getState().pagination.pageIndex + 2)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
className='size-6'
|
||||
onClick={() => table.nextPage()}
|
||||
hidden={!table.getCanNextPage()}
|
||||
>
|
||||
<ArrowLeft2 size={12} className="stroke-[#A8ABBF]" />
|
||||
<ArrowLeft2 size={12} className='stroke-[#A8ABBF]' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user