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

refactor(Table): add unwrapped prop for direct table rendering; adjust minWidth calculation for responsiveness

Browse source
This commit is contained in:
Marco Beretta 2025-10-17 17:44:15 +02:00
parent f3d4f9c890
commit 1cbe3e1326
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
3 changed files with 18 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -465,6 +465,7 @@ function DataTable<TData extends Record<string, unknown>, TValue>({
aria-label={localize('com_ui_data_table')}
aria-rowcount={data.length}
className="table-fixed"
unwrapped={true}
>
<TableHeader className="sticky top-0 z-10 bg-surface-secondary">
{headerGroups.map((headerGroup) => (
@ -516,7 +517,7 @@ function DataTable<TData extends Record<string, unknown>, TValue>({
width: `${metaWidth}%`,
maxWidth: `${metaWidth}%`,
minWidth: isSmallScreen
? `${Math.max(metaWidth * 0.8, 60)}px`
? `${Math.max(metaWidth * 0.7, 10)}%`
: `${metaWidth}%`,
}
: {};

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

@ -76,7 +76,7 @@ const TableRowComponent = <TData extends Record<string, unknown>>(
? {
width: `${percent}%`,
maxWidth: `${percent}%`,
minWidth: isSmallScreen ? `${Math.max(percent * 0.8, 60)}px` : `${percent}%`,
minWidth: isSmallScreen ? `${Math.max(percent * 0.7, 10)}%` : `${percent}%`,
}
: undefined;

20
packages/client/src/components/Table.tsx
View file

@ -1,12 +1,22 @@
import * as React from 'react';
import { cn } from '~/utils';
const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
({ className, ...props }, ref) => (
<div className="relative w-full overflow-auto">
interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
unwrapped?: boolean;
}
const Table = React.forwardRef<HTMLTableElement, TableProps>(
({ className, unwrapped = false, ...props }, ref) => {
const tableElement = (
<table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
</div>
),
);
if (unwrapped) {
return tableElement;
}
return <div className="relative w-full overflow-auto">{tableElement}</div>;
},
);
Table.displayName = 'Table';