neetix

Table columns not respecting the column widths

Sometimes, the table columns don't follow their assigned widths, causing content to overflow and leading to the appearance of a horizontal scrollbar, as seen in the GIF below.

table columns not respecting column width.gif
Caution - Table columns not respecting the column width and content is overflowing

Solution

The above scroll issue can be solved by using scroll={{ x: "100%" }} prop, this restrict the horizontal scroll to 100% of the parent container.

<TableWrapper>
  <Table
    ...
    scroll={{ x: "100%" }}
  />
</TableWrapper>

fixed the horizontal scroll issue.gif
Do - use scroll={{ x: "100%" }} prop and content is wrapped to next line.

Can't find what you're looking for?