zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

fix(ui): add right alignment support for table columns using align prop

Browse Source
This commit is contained in:
Hyko
2026-04-22 19:35:39 -04:00
parent 5f7288974f
commit 0fd01d2b68
3 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/admin/pages/RolesPage.client.js
+1
View File
@@ -78,6 +78,7 @@ const RolesPageClient = () => {
label: '', label: '',
sortable: false, sortable: false,
noWrap: true, noWrap: true,
align: 'right',
render: (role) => ( render: (role) => (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button <Button
src/features/admin/pages/UsersPage.client.js
+1
View File
@@ -74,6 +74,7 @@ const UsersPageClient = () => {
label: '', label: '',
sortable: false, sortable: false,
noWrap: true, noWrap: true,
align: 'right',
render: (user) => ( render: (user) => (
<Button <Button
variant="secondary" variant="secondary"
src/shared/components/Table.js
+3 -3
View File
@@ -272,12 +272,12 @@ const Table = ({
{columns.map((column) => ( {columns.map((column) => (
<th <th
key={column.key} key={column.key}
className={`${sizeClasses.header} ${column.headerAlign === 'right' ? 'text-right' : 'text-left'} text-[11px] font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-[0.04em] ${ className={`${sizeClasses.header} ${column.align === 'right' || column.headerAlign === 'right' ? 'text-right' : 'text-left'} text-[11px] font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-[0.04em] ${
column.sortable ? 'cursor-pointer hover:text-neutral-900 dark:hover:text-white transition-colors' : '' column.sortable ? 'cursor-pointer hover:text-neutral-900 dark:hover:text-white transition-colors' : ''
}`} }`}
onClick={column.sortable && onSort ? () => onSort(column.key) : undefined} onClick={column.sortable && onSort ? () => onSort(column.key) : undefined}
> >
<div className={`flex items-center ${column.headerAlign === 'right' ? 'justify-end' : ''}`}> <div className={`flex items-center ${column.align === 'right' || column.headerAlign === 'right' ? 'justify-end' : ''}`}>
{column.label} {column.label}
{column.sortable && onSort && <SortIcon column={column} />} {column.sortable && onSort && <SortIcon column={column} />}
</div> </div>
@@ -302,7 +302,7 @@ const Table = ({
{...rowExtraProps} {...rowExtraProps}
> >
{columns.map((column, colIdx) => ( {columns.map((column, colIdx) => (
<td key={column.key} className={`${sizeClasses.cell} ${column.noWrap !== false ? '' : 'whitespace-nowrap'} group-hover:bg-neutral-50 dark:group-hover:bg-neutral-950 transition-colors ${isLast && colIdx === 0 ? 'rounded-bl-xl' : ''} ${isLast && colIdx === columns.length - 1 ? 'rounded-br-xl' : ''}`}> <td key={column.key} className={`${sizeClasses.cell} ${column.noWrap !== false ? '' : 'whitespace-nowrap'} ${column.align === 'right' ? 'text-right' : ''} group-hover:bg-neutral-50 dark:group-hover:bg-neutral-950 transition-colors ${isLast && colIdx === 0 ? 'rounded-bl-xl' : ''} ${isLast && colIdx === columns.length - 1 ? 'rounded-br-xl' : ''}`}>
{renderCellContent(item, column)} {renderCellContent(item, column)}
</td> </td>
))} ))}