danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: datatable styles

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