gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 13:32:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE-339): Export TABLE_DEFAULT_STYLING and refine table classes

Browse Source
This commit is contained in:
rstubryan
2025-12-09 18:44:35 +07:00
parent 8f5dd1851a
commit 066c356d4f
1 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Table.tsx
+18 -12
View File
@@ -72,21 +72,22 @@ const emptyContentDefaultValue = (
</div> </div>
); );
const TABLE_DEFAULT_STYLING = { export const TABLE_DEFAULT_STYLING = {
containerClassName: 'w-full mb-20', containerClassName: 'w-full mb-20',
tableWrapperClassName: tableWrapperClassName:
'overflow-x-auto border border-solid border-base-content/10 rounded-lg', 'overflow-x-auto border border-solid border-base-content/10 rounded-lg',
tableClassName: 'font-inter w-full table-auto text-sm font-medium', tableClassName: 'font-inter w-full table-auto text-sm font-medium',
tableHeaderClassName: '', tableHeaderClassName: '',
headerRowClassName: '', headerRowClassName: '',
headerColumnClassName: 'px-4 py-3 text-base-content/50', headerColumnClassName:
'px-4 py-3 border-base-content/10 text-base-content/50',
tableBodyClassName: '', tableBodyClassName: '',
bodyRowClassName: 'border-t border-t-base-content/10', bodyRowClassName: 'border-t border-base-content/10',
bodyColumnClassName: 'px-4 py-3 text-base-content', bodyColumnClassName: 'px-4 py-3 text-base-content',
paginationClassName: '', paginationClassName: '',
tableFooterClassName: 'bg-gray-100 font-semibold border border-gray-200', tableFooterClassName: 'font-semibold border-base-content/10',
footerRowClassName: 'border-t-2 border-gray-300', footerRowClassName: 'bg-base-200 border-t-2 border-base-content/10',
footerColumnClassName: 'px-6 py-3 text-xs text-gray-900', footerColumnClassName: 'p-4 text-base-content whitespace-nowrap',
}; };
const Table = <TData extends object>({ const Table = <TData extends object>({
@@ -251,13 +252,15 @@ const Table = <TData extends object>({
{ {
'first:w-9 first:pr-0': withCheckbox, 'first:w-9 first:pr-0': withCheckbox,
}, },
{
'border-b': header.colSpan > 1,
},
tableClassNames.headerColumnClassName tableClassNames.headerColumnClassName
)} )}
> >
<div <div
className={cn('flex items-center gap-1', { className={cn('flex items-center gap-1 min-h-full', {
'justify-center relative after:content-[""] after:absolute after:left-0 after:right-0 after:bottom-0 after:h-px after:bg-base-content/10 after:translate-y-4': 'justify-center': header.colSpan > 1,
header.colSpan > 1,
})} })}
> >
{flexRender( {flexRender(
@@ -321,13 +324,16 @@ const Table = <TData extends object>({
</tr> </tr>
))} ))}
</tbody> </tbody>
<tfoot className={cn(className.tableFooterClassName)}> <tfoot className={cn(tableClassNames.tableFooterClassName)}>
{renderFooter && ( {renderFooter && (
<tr className={className.footerRowClassName}> <tr className={cn(tableClassNames.footerRowClassName)}>
{table.getAllLeafColumns().map((column) => ( {table.getAllLeafColumns().map((column) => (
<td <td
key={column.id} key={column.id}
className={className.footerColumnClassName} className={cn(
{ 'first:w-9 first:pr-0': withCheckbox },
tableClassNames.footerColumnClassName
)}
> >
{column.columnDef.footer && {column.columnDef.footer &&
flexRender(column.columnDef.footer, { flexRender(column.columnDef.footer, {