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

fix: ensure desktopOnly columns are hidden on mobile in DataTable

Browse source
This commit is contained in:
Marco Beretta 2025-09-25 00:24:57 +02:00
parent a3de2245b1
commit 905cef1ac2
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
2 changed files with 19 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/client/src/components/DataTable/DataTable.types.ts
View file

@ -57,7 +57,6 @@ export interface DataTableProps<TData extends Record<string, unknown>, TValue> {
selectedCount: number;
selectedRows: TData[];
table: Table<TData & { _id: string }>;
showToast: (message: string) => void;
}) => React.ReactNode;
}

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

@ -53,11 +53,19 @@ const TableRowComponent = <TData extends Record<string, unknown>>({
className="border-none hover:bg-surface-secondary"
>
{row.getVisibleCells().map((cell) => {
const meta = cell.column.columnDef.meta as { className?: string } | undefined;
const meta = cell.column.columnDef.meta as
| { className?: string; desktopOnly?: boolean }
| undefined;
const isDesktopOnly = meta?.desktopOnly;
return (
<TableCell
key={cell.id}
className={cn('truncate p-3', cell.column.id === 'select' && 'p-1', meta?.className)}
className={cn(
'truncate p-3',
cell.column.id === 'select' && 'p-1',
meta?.className,
isDesktopOnly && 'hidden md:table-cell',
)}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
@ -89,9 +97,16 @@ export const SkeletonRows = memo(
const columnKey = String(
column.id ?? ('accessorKey' in column && column.accessorKey) ?? '',
);
const meta = column.meta as { className?: string } | undefined;
const meta = column.meta as { className?: string; desktopOnly?: boolean } | undefined;
return (
<TableCell key={columnKey} className={cn('px-2 py-2 md:px-3', meta?.className)}>
<TableCell
key={columnKey}
className={cn(
'px-2 py-2 md:px-3',
meta?.className,
meta?.desktopOnly && 'hidden md:table-cell',
)}
>
<Skeleton className="h-6 w-full" />
</TableCell>
);