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

pixel perfect

Browse Source
This commit is contained in:
hamid zarghami
2025-07-26 15:52:18 +03:30
parent d324935836
commit 6dca90bd56
20 changed files with 184 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Table.tsx
+9 -6
View File
@@ -5,6 +5,7 @@ import { TableProps, RowDataType, ColumnType } from './types/TableTypes';
import { Checkbox } from './ui/checkbox';
import RowActionsDropdown from './RowActionsDropdown';
import Pagination from './Pagination';
import NoData from '@/assets/images/empty.svg';
const Table = <T extends RowDataType>({
columns,
@@ -13,7 +14,7 @@ const Table = <T extends RowDataType>({
onRowClick,
className = '',
rowClassName = '',
noDataMessage = 'هیچ داده‌ای یافت نشد',
noDataMessage = 'هیچ داده‌ای یافت نشد.',
headerClassName = 'bg-gray-50',
emptyRowsCount = 5,
showHeader = true,
@@ -117,7 +118,8 @@ const Table = <T extends RowDataType>({
if (data.length === 0) {
return (
<div className={`bg-white ${roundedClass} text-center text-gray-500`}>
{noDataMessage}
<img src={NoData} alt='no data' className='w-[100px] mx-auto pt-[70px]' />
<div className='-mt-5 pb-[70px]'>{noDataMessage}</div>
</div>
);
}
@@ -134,7 +136,7 @@ const Table = <T extends RowDataType>({
return (
<div
key={item.id}
className={`w-full min-h-[48px] ${bgColor} ${hoverColor} ${onRowClick ? 'cursor-pointer' : ''} ${getRowClassName(item, rowIndex)} px-4 py-3 flex items-center gap-3 ${rowIndex !== 0 ? 'border-t border-[#EAEDF5]' : ''}`}
className={`w-full min-h-[85px] ${bgColor} ${hoverColor} ${onRowClick ? 'cursor-pointer' : ''} ${getRowClassName(item, rowIndex)} px-4 py-3 flex items-center gap-3 ${rowIndex !== 0 ? 'border-t border-[#EAEDF5]' : ''}`}
onClick={() => handleRowClick(item)}
>
{selectable && (
@@ -215,8 +217,9 @@ const Table = <T extends RowDataType>({
if (data.length === 0) {
return (
<tr>
<td colSpan={columns.length + (selectable ? 1 : 0) + (inlineActions ? 1 : 0) + (rowActions ? 1 : 0)} className="px-3 md:px-6 pb-6 md:pb-8 text-center text-gray-500">
{noDataMessage}
<td colSpan={columns.length + (selectable ? 1 : 0) + (inlineActions ? 1 : 0) + (rowActions ? 1 : 0)} className="px-3 md:px-6 pb-6 md:pb-14 text-center text-gray-500">
<img src={NoData} alt='no data' className='w-[100px] mx-auto' />
<div className='-mt-5'>{noDataMessage}</div>
</td>
</tr>
);
@@ -231,7 +234,7 @@ const Table = <T extends RowDataType>({
return (
<tr
key={item.id}
className={`w-full h-[64px] md:h-[74px] ${bgColor} border-t border-[#EAEDF5] ${hoverColor} ${onRowClick ? 'cursor-pointer' : ''} ${getRowClassName(item, rowIndex)}`}
className={`w-full md:h-[64px] !h-[74px] ${bgColor} border-t border-[#EAEDF5] ${hoverColor} ${onRowClick ? 'cursor-pointer' : ''} ${getRowClassName(item, rowIndex)}`}
onClick={() => handleRowClick(item)}
>
{selectable && (