feat(ui-table): expose min-width prop, so one can make a table where each column has no wrapping text

[matyasf]

This new prop allows to set minWidth='max-content'. Such a table with the default layout (auto) will be so wide so text is not wrapping, even if it has to display scrollbars
To test:
Check this code in an example, it should have no wrapping text and have a horizontal scrollbar:
(also if you remove minWidth='max-content' then it should take up 100% with and have no scrollbar)

const COLUMNS = [
  { id: "name", header: "Name", minWidth: "14rem", maxWidth: "40rem" },
  { id: "status", header: "Status", minWidth: "4rem", maxWidth: "5rem" },
  { id: "points", header: "Points", minWidth: "5rem", maxWidth: "8rem" },
  { id: "creator", header: "Creator", minWidth: "10rem", maxWidth: "20rem" },
  { id: "created", header: "Created", minWidth: "8rem", maxWidth: "12rem" },
  { id: "tags", header: "Tags", minWidth: "10rem", maxWidth: "20rem" },
  { id: "actions", header: "Actions", minWidth: "3.5rem" },
]
const data = [
  {
    id: 1,
    name: "ch 4 vocab",
    status: "Published",
    points: 10,
    creator: "teacher1",
    created: "Jan 15",
    tags: "vocab",
  },
  {
    id: 2,
    name: "unit 2 test - retake allowed until friday",
    status: "Draft",
    points: 50,
    creator: "teacher2",
    created: "Feb 3",
    tags: "test, unit 2, retake",
  },
  {
    id: 3,
    name: "geography test",
    status: "Published",
    points: 5,
    creator: "teacher3",
    created: "Mar 10",
    tags: "geo, pretest",
  },
];

function App() {

  return (
    <View as="div" padding="medium" maxWidth="800px">
      <View as="div" overflowX="auto" borderWidth="small" borderColor="primary">
        <Table caption="Quizzes" minWidth='max-content'>
          <Table.Head>
            <Table.Row>
              {COLUMNS.map((col) => (
                <Table.ColHeader key={col.id} id={col.id}>
                  {col.header}
                </Table.ColHeader>
              ))}
            </Table.Row>
          </Table.Head>
          <Table.Body>
            {data.map((row) => (
              <Table.Row key={row.id}>
                <Table.Cell>{row.name}</Table.Cell>
                <Table.Cell>{row.status}</Table.Cell>
                <Table.Cell>{row.points}</Table.Cell>
                <Table.Cell>{row.creator}</Table.Cell>
                <Table.Cell>{row.created}</Table.Cell>
                <Table.Cell>{row.tags}</Table.Cell>
                <Table.Cell>...</Table.Cell>
              </Table.Row>
            ))}
          </Table.Body>
        </Table>
      </View>
    </View>
  );
}
render(<App />)

INSTUI-4908

[matyasf]

We should use this type and @link documentation for exposed CSS for correct types and good documentation

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-02-03 10:58 UTC