[V8] How does one implement a basic table with max column sizes?

[amkuchta]

I have a table with some data in a particular column that can get rather long. I'd like the column to be width-limited and wrap the text when it gets too wide for the column. I've tried setting the width in defaultColumn and in each column using maxSize, but with no luck.

Has anyone done this?

[mcongrove]

I just did this with CSS.

{
	accessorKey: 'name',
	cell: (info) => (
		<div className="w-40">
			{info.renderValue()}
		</div>
	)
},

I'm using a component to wrap my cells, so mine turned out like this:

{
	accessorKey: 'name',
	meta: {
		className: 'w-40',
	}
},

With this, you can also truncate the text with ellipsis if you want.

[amkuchta]

@mcongrove Thanks for the tip, but unfortunately, this still doesn't work for me. My relevant code below:

TableColumns.tsx

Columns are generated here

export interface IVulnerabilitiesTableColumnsProps {
  setSelectedVulnerability: Function;
  setSelectedDeleteVulnerability: Function;
}

export function build(
  props: IVulnerabilitiesTableColumnsProps,
): ColumnDef<IVulnerability>[] {
  return [
    {
      accessorKey: 'UniqueVulnerabilityIdentifier',
      header: 'Identifier',
      cell: (row) => row.getValue(),
    },
    {
      accessorKey: 'VulnerabilityTitle',
      header: 'Title',
      cell: (row) => {
        return (
          <div className={'max-w-1/2'}>{row.renderValue() as ReactNode}</div>
        );
      },
      meta: {
        className: 'max-w-1/2',
      },
    },
    {
      accessorFn: (row) => row.UniqueFindings.length,
      header: 'Unique Findings Count',
      cell: (row) => row.getValue(),
    },
    {
      id: 'details',
      header: 'Details',
      cell: (row) => {
        return (
          <button
            className='hover:bg-blue-500 hover:text-white hover:border-transparent px-4 py-2 text-blue-700 bg-transparent border border-blue-500 rounded'
            onClick={() => {
              props.setSelectedVulnerability(row);
            }}
          >
            <i className='fa-light fa-eye' />
          </button>
        );
      },
    },
    {
      id: 'delete',
      header: 'Delete',
      cell: (row) => {
        return (
          <button
            className='hover:bg-red-700 hover:text-white hover:border-transparent px-4 py-2 text-red-700 bg-transparent border border-red-700 rounded'
            onClick={() => {
              props.setSelectedDeleteVulnerability(row);
            }}
          >
            <i className='fa-light fa-trash-alt' />
          </button>
        );
      },
    },
  ];
}

Table.tsx

Actual table is built

const VulnerabilitiesTable = ({
  data,
  columns,
}: TansStackTableProps<IVulnerability>): JSX.Element => {
  const table = useReactTable<IVulnerability>({
    data,
    columns,
    defaultColumn: {
      maxSize: 250,
    },
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <div className='p-2 w-full'>
      <table className={'table table-zebra table-compact max-w-full'}>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => {
                return (
                  <th
                    key={header.id}
                    colSpan={header.colSpan}
                  >
                    {header.isPlaceholder ? null : (
                      <div className={'max-w-1/2 inline break-normal'}>
                        {flexRender(
                          header.column.columnDef.header,
                          header.getContext(),
                        )}
                      </div>
                    )}
                  </th>
                );
              })}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => {
            return (
              <tr key={row.id}>
                {/* first row is a normal row */}
                {row.getVisibleCells().map((cell) => {
                  return (
                    <td key={cell.id}>
                      <div className={'max-w-1/2 inline break-normal'}>
                        {flexRender(
                          cell.column.columnDef.cell,
                          cell.getContext(),
                        )}
                      </div>
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
      <div className='h-2' />
      <div>{table.getRowModel().rows.length} Rows</div>
    </div>
  );
};

export default VulnerabilitiesTable;

PageLayout.tsx

Table is utilized

return (
    <main className='flex flex-col content-start flex-1 w-full px-20 text-center'>
      <h1 className='pb-4 text-6xl font-bold'>{props.pageTitle}</h1>
      <div>
        <AddNewItemButton
          buttonText={'Add Vulnerability'}
          onClickHandler={props.setSelectedVulnerability}
          selectedItem={new Hardware()}
        />
        <VulnerabilitiesTable
          data={props.vulnerabilityList}
          columns={VulnerabilitiesTableColumns.build({
            setSelectedVulnerability: props.setSelectedVulnerability,
            setSelectedDeleteVulnerability:
              props.setSelectedDeleteVulnerability,
          })}
        />
      </div>
    </main>
  );