search

carbon-design-system / carbon-components-svelte

Svelte implementation of the Carbon Design System
https://svelte.carbondesignsystem.com
Apache License 2.0
2.68k stars 261 forks source link

Empty column not work well with stickyHeader #440

Open AsakuraMizu opened 3 years ago

AsakuraMizu commented 3 years ago

Example:

<DataTable
  headers={[
    { key: 'id', value: 'ID' },
    { key: 'a', value: 'A' },
    { key: 'b', value: 'B' },
    { key: 'empty', empty: true },
  ]}
  rows={[
    { id: 0, a: 'a', b: 'b' },
    { id: 1, a: 'A', b: 'B' },
  ]}
  stickyHeader
>
  <span slot="cell" let:cell>
    {#if cell.key === 'empty'}
      TEST
    {:else}
      {cell.value}
    {/if}
  </span>
</DataTable>

The result: Screenshot_20201201_093953

The column name is not aligned with the value.

LaughingBubba commented 3 years ago

The other issue I found with stickyHeader is that it only ever shows the first five or so rows (of say 100)

rohanray commented 3 years ago

image Another example of the same issue

image The headers don't stick as well when scrolling on rows.

Installed version 0.30.0

        "carbon-components-svelte": {
            "version": "0.30.0",
            "resolved": "https://registry.npmjs.org/carbon-components-svelte/-/carbon-components-svelte-0.30.0.tgz",
n8allan commented 1 year ago

This should not have been given a documentation label; this is a functionality bug.