mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
feat(FE-326,327): Add sortable table headers and styling
This commit is contained in:
rstubryan
+64
-12
@@ -46,6 +46,7 @@ export interface CustomHeaderRow {
|
||||
colSpan?: number;
|
||||
rowSpan?: number;
|
||||
className?: string;
|
||||
field?: string;
|
||||
}>;
|
||||
className?: string;
|
||||
}
|
||||
@@ -236,18 +237,69 @@ const Table = <TData extends object>({
|
||||
headerRow.className || className.customHeaderRowClassName
|
||||
}
|
||||
>
|
||||
{headerRow.cells.map((cell) => (
|
||||
<th
|
||||
key={cell.id}
|
||||
colSpan={cell.colSpan}
|
||||
rowSpan={cell.rowSpan}
|
||||
className={
|
||||
cell.className || className.customHeaderCellClassName
|
||||
}
|
||||
>
|
||||
{cell.content}
|
||||
</th>
|
||||
))}
|
||||
{headerRow.cells.map((cell) => {
|
||||
const column = table
|
||||
.getAllColumns()
|
||||
.find((col) => col.id === cell.field);
|
||||
|
||||
const canSort = column?.getCanSort();
|
||||
const sortingState = column?.getIsSorted();
|
||||
|
||||
return (
|
||||
<th
|
||||
key={cell.id}
|
||||
colSpan={cell.colSpan}
|
||||
rowSpan={cell.rowSpan}
|
||||
onClick={
|
||||
canSort
|
||||
? column?.getToggleSortingHandler()
|
||||
: undefined
|
||||
}
|
||||
className={cn(
|
||||
cell.className || className.customHeaderCellClassName,
|
||||
canSort ? 'cursor-pointer select-none' : ''
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center gap-1',
|
||||
cell.className?.includes('text-center')
|
||||
? 'justify-center'
|
||||
: ''
|
||||
)}
|
||||
>
|
||||
{cell.content}
|
||||
|
||||
{canSort && (
|
||||
<div className='flex items-center'>
|
||||
<Icon
|
||||
icon='lucide:arrow-up'
|
||||
width={12}
|
||||
height={12}
|
||||
className={cn(
|
||||
'transition-all ease-in-out duration-200',
|
||||
sortingState === 'asc'
|
||||
? 'text-black'
|
||||
: 'text-black/30'
|
||||
)}
|
||||
/>
|
||||
<Icon
|
||||
icon='lucide:arrow-down'
|
||||
width={12}
|
||||
height={12}
|
||||
className={cn(
|
||||
'transition-all ease-in-out duration-200',
|
||||
sortingState === 'desc'
|
||||
? 'text-black'
|
||||
: 'text-black/30'
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
|
||||
|
||||
@@ -14,6 +14,15 @@ interface SalesReportTableProps {
|
||||
initialValues?: BaseClosingSales;
|
||||
}
|
||||
|
||||
interface HeaderCell {
|
||||
id: string;
|
||||
content: React.ReactNode;
|
||||
colSpan?: number;
|
||||
rowSpan?: number;
|
||||
className: string;
|
||||
field?: string;
|
||||
}
|
||||
|
||||
const generateCustomHeaders = (template: {
|
||||
groups: Array<{
|
||||
label: string;
|
||||
@@ -41,31 +50,43 @@ const generateCustomHeaders = (template: {
|
||||
|
||||
template.groups.forEach((group) => {
|
||||
if (group.subLabels) {
|
||||
mainRow.push({
|
||||
const mainCell: HeaderCell = {
|
||||
id: `${group.field || 'group'}-${subColumnIndex}`,
|
||||
content: group.label,
|
||||
colSpan: group.colSpan,
|
||||
className:
|
||||
'px-4 py-3 text-xs font-semibold text-gray-700 text-center whitespace-nowrap border border-gray-300',
|
||||
});
|
||||
'px-4 py-3 text-xs font-semibold text-gray-700 text-center whitespace-nowrap border border-gray-200',
|
||||
};
|
||||
|
||||
mainRow.push(mainCell);
|
||||
|
||||
group.subLabels.forEach((subLabel) => {
|
||||
subRow.push({
|
||||
const subCell: HeaderCell = {
|
||||
id: `sub-${subColumnIndex}`,
|
||||
content: subLabel,
|
||||
className:
|
||||
'px-4 py-3 text-xs font-semibold text-gray-700 text-left whitespace-nowrap border border-gray-300 border-t-0',
|
||||
});
|
||||
'px-4 py-3 text-xs font-semibold text-gray-700 text-left whitespace-nowrap border border-gray-200',
|
||||
};
|
||||
|
||||
if (group.label === 'Jumlah') {
|
||||
subCell.field = subLabel === 'Ekor' ? 'quantity' : 'weight';
|
||||
}
|
||||
|
||||
subRow.push(subCell);
|
||||
subColumnIndex++;
|
||||
});
|
||||
} else {
|
||||
mainRow.push({
|
||||
const mainCell: HeaderCell = {
|
||||
id: `${group.field}-header`,
|
||||
content: group.label,
|
||||
rowSpan: group.rowSpan,
|
||||
className:
|
||||
'px-4 py-3 text-xs font-semibold text-gray-700 text-left whitespace-nowrap border border-gray-300',
|
||||
});
|
||||
'px-4 py-3 text-xs font-semibold text-gray-700 text-left whitespace-nowrap border border-gray-200',
|
||||
};
|
||||
|
||||
mainCell.field = group.field;
|
||||
|
||||
mainRow.push(mainCell);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -371,7 +392,7 @@ const SalesReportTable = ({
|
||||
},
|
||||
{ label: 'AVG (Kg)', field: 'average', rowSpan: 2 },
|
||||
{ label: 'Harga Mitra (Rp)', field: 'price_partner', rowSpan: 2 },
|
||||
{ label: 'Total Mitra (Rp)', field: 'total_partner', rowSpan: 2 },
|
||||
{ label: 'Total Mitra (Rp)', field: 'total_mitra', rowSpan: 2 },
|
||||
{ label: 'Harga Act (Rp)', field: 'price_act', rowSpan: 2 },
|
||||
{ label: 'Total Act (Rp)', field: 'total_act', rowSpan: 2 },
|
||||
{ label: 'Kandang', field: 'kandang', rowSpan: 2 },
|
||||
@@ -413,49 +434,37 @@ const SalesReportTable = ({
|
||||
renderFooter={salesBroilerData.length > 0}
|
||||
footerContent={
|
||||
<tfoot>
|
||||
<tr className='bg-gray-100 font-semibold'>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'>
|
||||
<tr className='bg-gray-100 font-semibold border border-gray-200'>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '>
|
||||
Total Penjualan
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'>
|
||||
-
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'>
|
||||
-
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'>
|
||||
-
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'>
|
||||
-
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
|
||||
{formatNumber(totals.totalQuantity)}
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
|
||||
{formatNumber(totals.totalWeight)}
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
|
||||
{formatNumber(totals.avgWeight)}
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
|
||||
{formatCurrency(totals.avgPricePartner)}
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
|
||||
{formatCurrency(totals.totalPartner)}
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
|
||||
{formatCurrency(totals.avgPriceAct)}
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
|
||||
{formatCurrency(totals.totalAct)}
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'>
|
||||
-
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'>
|
||||
-
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
}
|
||||
@@ -463,9 +472,10 @@ const SalesReportTable = ({
|
||||
tableWrapperClassName: 'overflow-x-auto',
|
||||
tableClassName: 'w-full table-auto text-sm',
|
||||
headerRowClassName: 'hidden',
|
||||
bodyRowClassName: 'hover:bg-gray-50 transition-colors',
|
||||
bodyRowClassName:
|
||||
'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300',
|
||||
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user