Can a Datatable be horizontally scrollable?

[cgildenia]

Hello all, I have a Datatable with a lot of columns and I haven't been able to get a scrollbar that works just for the table itself.
ATM there is the scrollbar for the web itself, but that doesn't look good enough.

[theetrain]

@cgildenia I have this CSS set up for my DataTables:

  /*
    Table wrapper used to opt into sticky styles

    Usage:
    <div class="table-wrapper">
      <DataTable />
    </div>
  */
  :global(.table-wrapper) {
    overflow-x: scroll;
  }
  /*
    Keep header and toolbar visible on
    wide tables with sticky content
  */
  :global(.table-wrapper .bx--data-table-container) {
    overflow: auto;
  }
  :global(.table-wrapper .bx--data-table-header, .table-wrapper
      .bx--table-toolbar, .table-wrapper .bx--pagination) {
    position: sticky;
    left: 0;
  }

And then you can wrap your DataTable with the table-wrapper class:

<div class="table-wrapper">
  <DataTable {...tableProps} />
</div>

Having a built-in way for tables be scrollable is something I would advocate for.

[dybxin]

@theetrain i also agree that having a built-in way for tables be scrollable in x (even in y).

use the original datatable component: when i click f12 to inspect, then change the width, the bottom scroll show(just show), does it mean that the original component has relevant considerations, but has not yet been implemented?

[theetrain]

carbon-components-svelte is a community port of Carbon React; so all end-user-facing functionality and accessibility considerations must be implemented in the flagship library before it makes its way to the Svelte library.

You may open an issue there to start the conversation; and once a decision has been made it'll certainly find its way back here.