Fixed or Sticky Column

[roobyz]

Is there any feature or plan to implement a fixed column setting?

What: Configure data table with predefined set of columns fixed (e.g. columns 1 and/or 2, etc.) Why: Enable scrolling left or right with the first column fixed in position

Thanks!!

[vincjo]

There is currently no feature to achieve that. It can be set with pure CSS, I'll work on it for the next major release.

[vincjo]

As mentionned, it is not yet built-in but will be in the next 2.0 (doc)

[roobyz]

Thanks for implementing the feature already. Quick question... I tried working on the pure CSS approach, and haven't had any success. Neither the column nor header get sticky. Any ideas?

    .table-wrapper {
        position: relative;
        width: 100%;
        overflow: auto;
        max-height: 65vh;
    }
    table thead {
        top: 0px;
        position: sticky;
    }
    table tr > *:nth-child(1) {
        left: 0px;
        position: sticky;
        inset-inline-start: 0;
        z-index: 1;
        backdrop-filter: brightness(0.9);
    }

[vincjo]

Here is an example working for me: https://svelte.dev/repl/8bd32c928c7c45c38328266ed6cf3caa?version=4.2.18

Style:

thead {
    background:#fff;    
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
}

tr > *:nth-child(1) {
    position: sticky;
    left: 0px;
    width: 56px;
    background: #fff;
    border-right: 2px solid #e0e0e0;
}