fix: revert ResizableTableContainer — was causing wide checkbox column

Column resize needs dedicated CSS work. Show/hide columns still works.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-31 13:37:16 +05:30
parent 1e64760fd1
commit 9ec8d194ac
2 changed files with 5 additions and 15 deletions

View File

@@ -17,9 +17,7 @@ import {
Cell as AriaCell, Cell as AriaCell,
Collection as AriaCollection, Collection as AriaCollection,
Column as AriaColumn, Column as AriaColumn,
ColumnResizer as AriaColumnResizer,
Group as AriaGroup, Group as AriaGroup,
ResizableTableContainer as AriaResizableTableContainer,
Row as AriaRow, Row as AriaRow,
Table as AriaTable, Table as AriaTable,
TableBody as AriaTableBody, TableBody as AriaTableBody,
@@ -117,9 +115,9 @@ const TableRoot = ({ className, size = "md", ...props }: TableRootProps) => {
return ( return (
<TableContext.Provider value={{ size: context?.size ?? size }}> <TableContext.Provider value={{ size: context?.size ?? size }}>
<AriaResizableTableContainer className="flex-1 overflow-auto min-h-0"> <div className="flex-1 overflow-auto min-h-0">
<AriaTable className={(state) => cx("w-full", typeof className === "function" ? className(state) : className)} {...props} /> <AriaTable className={(state) => cx("w-full", typeof className === "function" ? className(state) : className)} {...props} />
</AriaResizableTableContainer> </div>
</TableContext.Provider> </TableContext.Provider>
); );
}; };
@@ -170,10 +168,9 @@ TableHeader.displayName = "TableHeader";
interface TableHeadProps extends AriaColumnProps, Omit<ThHTMLAttributes<HTMLTableCellElement>, "children" | "className" | "style" | "id"> { interface TableHeadProps extends AriaColumnProps, Omit<ThHTMLAttributes<HTMLTableCellElement>, "children" | "className" | "style" | "id"> {
label?: string; label?: string;
tooltip?: string; tooltip?: string;
allowsResizing?: boolean;
} }
const TableHead = ({ className, tooltip, label, children, allowsResizing, ...props }: TableHeadProps) => { const TableHead = ({ className, tooltip, label, children, ...props }: TableHeadProps) => {
const { selectionBehavior } = useTableOptions(); const { selectionBehavior } = useTableOptions();
return ( return (
@@ -189,8 +186,8 @@ const TableHead = ({ className, tooltip, label, children, allowsResizing, ...pro
} }
> >
{(state) => ( {(state) => (
<AriaGroup className="flex items-center gap-1" role="presentation"> <AriaGroup className="flex items-center gap-1">
<div className="flex items-center gap-1 flex-1 min-w-0"> <div className="flex items-center gap-1">
{label && <span className="text-xs font-semibold whitespace-nowrap text-quaternary">{label}</span>} {label && <span className="text-xs font-semibold whitespace-nowrap text-quaternary">{label}</span>}
{typeof children === "function" ? children(state) : children} {typeof children === "function" ? children(state) : children}
</div> </div>
@@ -209,10 +206,6 @@ const TableHead = ({ className, tooltip, label, children, allowsResizing, ...pro
) : ( ) : (
<FontAwesomeIcon icon={faSort} className="text-fg-quaternary" /> <FontAwesomeIcon icon={faSort} className="text-fg-quaternary" />
))} ))}
{allowsResizing && (
<AriaColumnResizer className="absolute top-0 right-0 bottom-0 w-1 cursor-col-resize bg-transparent hover:bg-brand data-[resizing]:bg-brand" />
)}
</AriaGroup> </AriaGroup>
)} )}
</AriaColumn> </AriaColumn>

View File

@@ -133,9 +133,6 @@ export const LeadTable = ({
id={column.id} id={column.id}
label={column.label} label={column.label}
allowsSorting={column.allowsSorting} allowsSorting={column.allowsSorting}
allowsResizing={column.id !== 'actions'}
defaultWidth={column.defaultWidth}
minWidth={50}
/> />
)} )}
</Table.Header> </Table.Header>