Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
ajthinking committed Jan 23, 2025
1 parent 6f3765b commit beb4dd5
Show file tree
Hide file tree
Showing 4 changed files with 12 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export const MemoizedTableBody = memo(({
const cell = row.getVisibleCells()[virtualColumn.index];
// @ts-ignore
const maxChars = cell.column.columnDef.meta?.maxChars ?? 0;
const width = Math.min(320, maxChars * 8 + 24); // Cap maximum width, 8px per character + 24px padding
const width = Math.min(80, maxChars * 8 + 24); // More aggressive width cap for cells
return (
<td
key={cell.id}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const MemoizedTableHeader = memo(({
const headerColumn = headerGroup.headers[virtualColumn.index];
// @ts-ignore
const maxChars = headerColumn.column.columnDef.meta?.maxChars ?? 0;
const width = maxChars * 8 + 24; // 8px per character + 24px padding
const width = Math.min(80, maxChars * 8 + 24); // More aggressive width cap for headers

return (
<th
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/Node/table/TableCell.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { Cell, Header } from '@tanstack/react-table';

export const FIXED_HEIGHT = 18;
export const MIN_WIDTH = 40;
export const MAX_WIDTH = 300;
export const MAX_WIDTH = 256;

export interface ColumnWidthInfo {
minContent: number;
Expand Down
13 changes: 9 additions & 4 deletions packages/ui/src/components/Node/table/TableNodeComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,9 @@ const TableNodeComponent = ({ id, data }: {
// Step 3: Calculate column metadata once
const columnMetadata = useMemo(() => {
const metadata: Record<string, { maxChars: number }> = {};
const maxTotalWidth = 256;
const totalColumns = headers.length;
const maxCharsPerColumn = Math.floor((maxTotalWidth - 24) / (8 * Math.max(1, totalColumns))); // 8px per char, 24px padding total

headers.forEach(header => {
const columnData = tableData.map(row => row[header]);
Expand All @@ -79,7 +82,7 @@ const TableNodeComponent = ({ id, data }: {
});

metadata[header] = {
maxChars: Math.min(40, Math.max(header.length, ...lengths)) // Cap maximum width
maxChars: Math.min(maxCharsPerColumn, Math.max(3, Math.min(20, Math.max(header.length, ...lengths)))) // More aggressive capping
};
});

Expand Down Expand Up @@ -184,19 +187,21 @@ const TableNodeComponent = ({ id, data }: {
className="shadow-xl bg-gray-50 border rounded border-gray-300 text-xs"
>
<CustomHandle id={input.id} isConnectable={true} isInput={true} />
<div data-cy={'data-story-table'} className="text-gray-600 bg-gray-100 rounded font-mono -mt-3">
<div data-cy={'data-story-table'} className="text-gray-600 max-w-256 bg-gray-100 rounded font-mono -mt-3" style={{ maxWidth: '256px', width: '256px' }}>
{isDataFetched ? (
<div
ref={parentRef}
style={{
height: tableHeight,
position: 'relative',
maxWidth: '256px',
width: '256px',
...virtualPaddingVars,
}}
data-cy={'data-story-table-scroll'}
className="max-h-64 max-w-256 min-w-6 nowheel overflow-auto scrollbar rounded-sm"
className="max-h-64 min-w-6 nowheel overflow-auto scrollbar rounded-sm"
>
<table className="table-fixed w-max">
<table className="table-fixed" style={{ maxWidth: '256px', width: '256px' }}>
<MemoizedTableHeader
headerGroups={getHeaderGroups()}
virtualColumns={virtualColumns}
Expand Down

0 comments on commit beb4dd5

Please sign in to comment.