Fix Table inconsistencies

Ref: https://github.com/bigbinary/neeto-engineering-ui-ux/issues/132

Follow below best practices while working on tables.

Best practices

  1. Remove the row-level click functionality, as it could potentially interfere with other interactions such as copying text and performing actions in other columns.

  2. Add clickable links in the first column - use neetoUI link Button.

  3. Move three dot menu to the first column in the table.

  4. Remove the unwanted fixed right column from Tables

  5. 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.

  6. Container should be the parent component of TableWrapper.

  7. Don't use alternate rows highlighting effect since we enabled borders for all Tables.

  8. To fix issues related to Table columns not respecting the column widths, we use scroll={{ x: "100%" }} prop to restrict the horizontal scroll to 100% of the parent container.

  9. 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.