feat: apply full width automatically for DataTable

[eunjae-lee]

What does this PR do?

This PR improves DataTable to fill the full width.

Details

The way we calculate the default width of columns in DataTable:

1. Use explicitly given size values as a part of ColumnDef. Example:

   cal.com/packages/features/users/components/UserTable/UserListTable.tsx

   Line 203 in d71b9e2

   size: 120,

2. Rely on getSize() function and its default value (https://tanstack.com/table/latest/docs/api/features/column-sizing#getsize)

When browser's width is too large or there is not enough columns, the DataTable doesn't fill the full width. It used to do so, but not anymore since we've applied flex to <TableRow /> for the following reasons:

1. To enable pinned columns (on the right side)
2. To enable column resizing

This PR fixes the logic to calculate the column widths by increasing them a bit more if the calculated total widths doesn't fill the container's clientWidth. They are also re-calculated as browser resizes.

Screenshot.2024-12-23.at.17.17.08.mp4

(The recalculation of column sizes on window resize is debounced for better performance.)

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• N/A - I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

If you already have resized columns, it may affect the result. So it's better to delete data from localStorage before testing. Delete all the keys starting with data-table-column-sizing-.

DataTable should look good in the following pages:

• /settings/organizations/[orgSlug]/members
• /insights/routing
• /settings/teams/[teamId]/members

Checklist

[graphite-app]

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (12/23/24)

1 reviewer was added to this PR based on Keith Williams's automation.