Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-24 12:20:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(DataTable): improve column width handling and responsiveness; disable row selection

Browse source
This commit is contained in:
Marco Beretta 2025-10-01 00:15:57 +02:00
parent b9ca23c606
commit a081f0f4f4
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
3 changed files with 59 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

13
client/src/components/Nav/SettingsTabs/General/ArchivedChats.tsx
View file

@ -248,8 +248,7 @@ export default function ArchivedChatsTable() {
);
},
meta: {
width: 65,
className: 'min-w-[150px]',
className: 'min-w-[150px] flex-1',
},
enableSorting: true,
},
@ -269,8 +268,7 @@ export default function ArchivedChatsTable() {
return formatDate(convo.createdAt?.toString() ?? '', isSmallScreen);
},
meta: {
width: 20,
className: 'min-w-[6rem]',
className: 'w-32 sm:w-40',
desktopOnly: true,
},
enableSorting: true,
@ -328,8 +326,7 @@ export default function ArchivedChatsTable() {
);
},
meta: {
width: 30,
className: 'min-w-[5rem]',
className: 'w-24',
},
enableSorting: false,
},
@ -363,8 +360,8 @@ export default function ArchivedChatsTable() {
debounce: 300,
},
selection: {
enableRowSelection: true,
showCheckboxes: true,
enableRowSelection: false,
showCheckboxes: false,
},
}}
filterValue={searchValue}

10
packages/client/src/components/DataTable/DataTable.tsx
View file

@ -527,9 +527,15 @@ function DataTable<TData extends Record<string, unknown>, TValue>({
const metaWidth = (header.column.columnDef.meta as { width?: number } | undefined)
?.width;
const widthStyle = isSelectHeader
? { width: '32px', maxWidth: '32px' }
? { width: '32px', maxWidth: '32px', minWidth: '32px' }
: metaWidth && metaWidth >= 1 && metaWidth <= 100
? { width: `${metaWidth}%`, maxWidth: `${metaWidth}%` }
? {
width: `${metaWidth}%`,
maxWidth: `${metaWidth}%`,
minWidth: isSmallScreen
? `${Math.max(metaWidth * 0.8, 60)}px`
: `${metaWidth}%`,
}
: {};
return (
<TableHead

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

@ -50,44 +50,53 @@ interface TableRowComponentProps<TData extends Record<string, unknown>> {
const TableRowComponent = <TData extends Record<string, unknown>>(
{ row, virtualIndex, style, selected }: TableRowComponentProps<TData>,
ref: React.Ref<HTMLTableRowElement>,
) => (
<TableRow
ref={ref}
data-state={selected ? 'selected' : undefined}
data-index={virtualIndex}
className="border-none hover:bg-surface-secondary"
style={style}
>
{row.getVisibleCells().map((cell) => {
const meta = cell.column.columnDef.meta as
| { 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;
) => {
// Check if we're on mobile - use window.innerWidth for component-level check
const isSmallScreen = typeof window !== 'undefined' && window.innerWidth < 768;
return (
<TableCell
key={cell.id}
className={cn(
'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>
);
})}
</TableRow>
);
return (
<TableRow
ref={ref}
data-state={selected ? 'selected' : undefined}
data-index={virtualIndex}
className="border-none hover:bg-surface-secondary"
style={style}
>
{row.getVisibleCells().map((cell) => {
const meta = cell.column.columnDef.meta as
| { 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', minWidth: '32px' }
: percent && percent >= 1 && percent <= 100
? {
width: `${percent}%`,
maxWidth: `${percent}%`,
minWidth: isSmallScreen ? `${Math.max(percent * 0.8, 60)}px` : `${percent}%`,
}
: undefined;
return (
<TableCell
key={cell.id}
className={cn(
'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>
);
})}
</TableRow>
);
};
type ForwardTableRowComponentType = <TData extends Record<string, unknown>>(
props: TableRowComponentProps<TData> & React.RefAttributes<HTMLTableRowElement>,