diff --git a/src/components/Table.tsx b/src/components/Table.tsx index 37bc118a..0e095c1f 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -31,6 +31,7 @@ interface TableClassNames { headerColumnClassName?: string; tableBodyClassName?: string; bodyRowClassName?: string; + selectedBodyRowClassName?: string; bodyColumnClassName?: string; tableFooterClassName?: string; footerRowClassName?: string; @@ -88,9 +89,11 @@ export const TABLE_DEFAULT_STYLING = { headerColumnClassName: 'px-4 py-3 border-base-content/10 text-base-content/50 text-sm font-medium', tableBodyClassName: '', - bodyRowClassName: 'border-t border-base-content/10', + bodyRowClassName: + 'transition-all duration-200 border-t border-base-content/10 bg-transparent', + selectedBodyRowClassName: 'bg-primary/5', bodyColumnClassName: 'px-4 py-3 text-base-content', - paginationClassName: '', + paginationClassName: 'px-3', tableFooterClassName: 'font-semibold border-base-content/10', footerRowClassName: 'bg-base-200 border-t-2 border-base-content/10', footerColumnClassName: 'p-4 text-base-content whitespace-nowrap', @@ -353,7 +356,11 @@ const Table = ({ key={row.id} className={cn( TABLE_DEFAULT_STYLING.bodyRowClassName, - tableClassNames.bodyRowClassName + tableClassNames.bodyRowClassName, + { + [tableClassNames.selectedBodyRowClassName]: + row.getIsSelected(), + } )} > {row.getVisibleCells().map((cell) => (