feat: Introduce resizable table component

[ironAiken2]

TL;DR

Introduce BAITable, resizable table component.

What changed?

• Implemented a table component that can be resized. Usage is the same as Table in traditional antd.

BAITable calculates and applies new widths based on a fixed width, so there are two rules to follow for smooth behavior

• BAITable must have a width specified in the column data.
• If you use data that exceeds the width specified for the column, you must use the ellipsis property.

How to test?

• Install the newly added packages.
• Replace the parts of the webui that currently use table with BAITable.

---

Checklist: (if applicable)

• Mention to the original issue
• Documentation
• Minium required manager version
• Specific setting for review (eg., KB link, endpoint or how to setup)
• Minimum requirements to check during review
• Test case(s) to demonstrate the difference of before/after

[graphite-app]

Your org requires the Graphite merge queue for merging into main

Add the label “flow:merge-queue” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “flow:hotfix” to add to the merge queue as a hot fix.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

[ironAiken2]

• feat: Introduce resizable table component #2606 👈
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @ironAiken2 and the rest of your teammates on Graphite

[github-actions]

Coverage report for ./react

St.❔	Category	Percentage	Covered / Total
🔴	Statements	5.39% (-0.02% 🔻)	338/6272
🔴	Branches	4.91% (-0.01% 🔻)	214/4357
🔴	Functions	3.05% (-0.01% 🔻)	63/2063
🔴	Lines	5.29% (-0.02% 🔻)	324/6125

Show new covered files 🐣

St.❔	File	Statements	Branches	Functions	Lines
🔴	... / BAITable.tsx	0%	0%	0%	0%

Test suite run success

90 tests passing in 11 suites.

Report generated by 🧪jest coverage report action from 7dfa157

[agatha197]

Sorry for checking late. Please solve the conflicts

[agatha197]

If I set the width to overflow, that column looks like this.

But, when I added this code to the columns, you can avoid overflow. Can you generalize it?

style={{
            overflow: 'hidden',
            whiteSpace: 'pre',
            wordWrap: 'break-word',
          }}

[agatha197]

If I set the narrow width, I cannot see the part of the contents until widening that column.
By adding whiteSpace: 'pre', wordWrap: 'break-word' to https://github.com/lablup/backend.ai-webui/pull/2606/files#diff-20fe13a09e30cb99672ad684d2c592b13f7ba6c973a8f0ec7a208195e4e3edefR22 line, you can avoid it or you can add a new line or add ellipsis, etc.

[agatha197]

Please check https://app.graphite.dev/github/pr/lablup/backend.ai-webui/2606/feat-Introduce-resizable-table-component#review-PRR_kwDOCRTcws6GsaqQ again

[ironAiken2]

Currently, the way vaadin tables show contents on resize is a mix of the line wrapping method you mentioned and the overflow: hidden method currently implemented.

The overflow:hidden method seems like a good idea because it doesn't break the table layout, but we'll have to talk about how to proceed. @agatha197 @yomybaby