Feature request - Make Table allow for resizing column widths / Scrolling

[glennpierce]

I currently have a thin wrapper / copy of Table called DataTable that is basically the same rust code but has the css below to allow the columns to be resized. Also the text of a cell does not push the text or overlap other columns.

It kind of works except by default the cells expand to the size of the contents of the cell where it should be something much smaller. I'm sure tit could be made much nicer.

Selecting text in a cell allows one to see the full contents and a scrollbar allows the table to scroll at least columns for now.

Not quite a full featured data table but I feel those features make it useful over a humble html table.

Thanks

.thaw-table {
    display: table;
    table-layout: auto; /* Change to fixed layout */
    width: 100%; /* Ensure the table takes up the full width of the container */
    background-color: var(--colorSubtleBackground);
    border-collapse: collapse;
    border-spacing: 0;
    overflow: hidden; /* Prevent horizontal scrolling at the table level */
}

.thaw-table-header {
    display: table-header-group;
}

.thaw-table-header-cell {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    font-weight: var(--fontWeightRegular);
    padding: 0px var(--spacingHorizontalS);
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis for overflowing text */
    white-space: nowrap;
    width: 100px; /* Set a smaller default width */
    min-width: 80px; /* Ensure that the columns can't get too small */
}
.thaw-table-header-cell__button {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--spacingHorizontalXS);
    padding: 0px;
    width: 100%;
    height: 100%;
    min-height: 32px;
    text-align: unset;
    font-family: inherit;
    font-size: inherit;
    line-height: normal;
    color: inherit;
    background-color: inherit;
    box-sizing: border-box;
    resize: horizontal; /* Allow column resizing */
    overflow: hidden;
    outline-style: none;
    border: none;
    white-space: nowrap;
}

.thaw-table-body {
    display: table-row-group;
}

.thaw-table-row {
    display: table-row;
    box-sizing: border-box;
    color: var(--colorNeutralForeground1);
    border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

.thaw-table-body > .thaw-table-row:hover {
    color: var(--colorNeutralForeground1Hover);
    background-color: var(--colorSubtleBackgroundHover);
}

.thaw-table-body > .thaw-table-row:active {
    color: var(--colorNeutralForeground1Pressed);
    background-color: var(--colorSubtleBackgroundPressed);
}

.thaw-table-cell {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    padding: 0px var(--spacingHorizontalS);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px; /* Set a smaller default width */
    min-width: 80px; /* Ensure that the columns can't get too small */
}

.thaw-table-cell-layout {
    display: block;
    overflow-x: auto; /* Allow horizontal scrolling if needed */
    white-space: nowrap; /* Keep text in one line */
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For IE and Edge */

}

.thaw-table-cell-layout::-webkit-scrollbar {
    width: 0; /* Hide the scrollbar width */
    height: 0; /* Hide the scrollbar height */
}

.thaw-table-cell:hover .thaw-table-cell-layout {
    overflow-x: auto; /* Ensure scrolling is available on hover */
}

.thaw-table-cell:hover::after {
    content: attr(data-fulltext); /* Display full text on hover */
    position: absolute;
    left: 0;
    top: 100%;
    background: #333;
    color: #fff;
    padding: 5px;
    white-space: nowrap;
    z-index: 10;
    border-radius: 4px;
}