Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-26 21:28:50 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refactor(DataTable): improve column sizing and visibility handling; remove deprecated features

Browse source
This commit is contained in:
Marco Beretta 2025-09-29 21:19:22 +02:00
parent 1cd82247ce
commit 9c5bbdaa28
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
10 changed files with 179 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

42
packages/client/src/components/DataTable/DataTableComponents.tsx
View file

@ -27,7 +27,7 @@ export const SelectionCheckbox = memo(
}
e.stopPropagation();
}}
className="flex h-full w-[30px] items-center justify-center"
className="flex h-full w-8 items-center justify-center"
onClick={(e) => {
e.stopPropagation();
onChange(!checked);
@ -40,18 +40,15 @@ export const SelectionCheckbox = memo(
SelectionCheckbox.displayName = 'SelectionCheckbox';
interface TableRowComponentProps<TData extends Record<string, unknown>> {
row: Row<TData>;
virtualIndex?: number;
style?: React.CSSProperties;
selected: boolean;
}
const TableRowComponent = <TData extends Record<string, unknown>>(
{
row,
virtualIndex,
style,
selected,
}: {
row: Row<TData>;
virtualIndex?: number;
style?: React.CSSProperties;
selected: boolean;
},
{ row, virtualIndex, style, selected }: TableRowComponentProps<TData>,
ref: React.Ref<HTMLTableRowElement>,
) => (
<TableRow
@ -63,18 +60,27 @@ const TableRowComponent = <TData extends Record<string, unknown>>(
>
{row.getVisibleCells().map((cell) => {
const meta = cell.column.columnDef.meta as
| { className?: string; desktopOnly?: boolean }
| { className?: string; desktopOnly?: boolean; width?: number }
| undefined;
const isDesktopOnly = meta?.desktopOnly;
const percent = meta?.width;
const widthStyle =
cell.column.id === 'select'
? { width: '32px', maxWidth: '32px' }
: percent && percent >= 1 && percent <= 100
? { width: `${percent}%`, maxWidth: `${percent}%` }
: undefined;
return (
<TableCell
key={cell.id}
className={cn(
'truncate p-3',
cell.column.id === 'select' && 'p-1',
'truncate px-2 py-2 md:px-3 md:py-3',
cell.column.id === 'select' && 'w-8 p-1',
meta?.className,
isDesktopOnly && 'hidden md:table-cell',
)}
style={widthStyle}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
@ -84,11 +90,7 @@ const TableRowComponent = <TData extends Record<string, unknown>>(
);
type ForwardTableRowComponentType = <TData extends Record<string, unknown>>(
props: {
row: Row<TData>;
virtualIndex?: number;
style?: React.CSSProperties;
} & React.RefAttributes<HTMLTableRowElement>,
props: TableRowComponentProps<TData> & React.RefAttributes<HTMLTableRowElement>,
) => JSX.Element;
const ForwardTableRowComponent = forwardRef(TableRowComponent) as ForwardTableRowComponentType;