Function WidgetTable

apps/start/src/components/widget-table.tsx:105–284

({
  className,
  columns,
  data,
  keyExtractor,
  eachRow,
  columnClassName,
}: Props<T>)

}

export function WidgetTable<T>({
  className,
  columns,
  data,
  keyExtractor,
  eachRow,
  columnClassName,
}: Props<T>) {
  const gridTemplateColumns =
    columns.length > 1
      ? `1fr ${columns
          .slice(1)
          .map(() => 'auto')
          .join(' ')}`
      : '1fr';

  const containerId = React.useMemo(
    () => `widget-table-${Math.random().toString(36).substring(7)}`,
    [],
  );

  // Generate CSS for container queries
  const containerQueryStyles = React.useMemo(() => {
    const styles: string[] = [];

    columns.forEach((column) => {
      if (
        column.responsive?.priority !== undefined &&
        column.responsive.priority > 1
      ) {
        // Breakpoints - Priority 2 = 150px, Priority 3 = 250px, etc.
        // Less aggressive: columns show at smaller container widths
        const minWidth = (column.responsive.priority - 1) * 100 + 50;
        // Hide by default by collapsing width and hiding content
        // Keep in grid flow but take up minimal space
        styles.push(
          `.${containerId} .cell[data-priority="${column.responsive.priority}"] { min-width: 0; max-width: 0; padding-left: 0; padding-right: 0; overflow: hidden; visibility: hidden; }`,
          `@container (min-width: ${minWidth}px) { .${containerId} .cell[data-priority="${column.responsive.priority}"] { min-width: revert; max-width: revert; padding-left: revert; padding-right: 0.5rem; overflow: revert; visibility: visible !important; } }`,
        );
      } else if (column.responsive?.minWidth !== undefined) {
        styles.push(
          `.${containerId} .cell[data-min-width="${column.responsive.minWidth}"] { min-width: 0; max-width: 0; padding-left: 0; padding-right: 0; overflow: hidden; visibility: hidden; }`,
          `@container (min-width: ${column.responsive.minWidth}px) { .${containerId} .cell[data-min-width="${column.responsive.minWidth}"] { min-width: revert; max-width: revert; padding-left: revert; padding-right: 0.5rem; overflow: revert; visibility: visible !important; } }`,
        );
      }
    });

    // Ensure last visible cell always has padding-right
    styles.push(
      `.${containerId} .cell:last-child { padding-right: 1rem !important; }`,
    );

    return styles.length > 0 ? <style>{styles.join('\n')}</style> : null;
  }, [columns, containerId]);

  return (
    <div className="w-full overflow-x-auto">
      <div