Ref: https://github.com/bigbinary/neeto-engineering-ui-ux/issues/132
Follow below best practices while working on tables.
Best practices
Remove the row-level click functionality, as it could potentially interfere with other interactions such as copying text and performing actions in other columns.
Add clickable links in the first column - use neetoUI link Button.
Remove the unwanted fixed right column from Tables
To fix redundant vertical scrolling due to incorrect fixed heights of Table wrapper, use
TableWrapper
component to wrap around a table element. Refer Table wrapper document to learn more.Container
should be the parent component ofTableWrapper
.Don't use alternate rows highlighting effect since we enabled borders for all Tables.
To fix issues related to Table columns not respecting the column widths, we use
scroll={{ x: "100%" }}
prop to restrict the horizontal scroll to100%
of the parent container.To fix the shrinking of 3 dots moved to first column use
flex-shrink-0
className as Dropdown buttonProps. See dropdown documentation to learn more about dropdown.