carbon-components-svelte/src/DataTable/Table.svelte

<script>
  /**
   * Set the size of the table
   * @type {"compact" | "short" | "medium" | "tall"}
   */
  export let size = undefined;

  /** Set to `true` to use zebra styles */
  export let zebra = false;

  /** Set to `true` to use static width */
  export let useStaticWidth = false;

  /** Set to `true` for the sortable variant */
  export let sortable = false;

  /** Set to `true` to enable a sticky header */
  export let stickyHeader = false;

  /**
   * Set the style attribute on the `table` element
   * @type {string}
   */
  export let tableStyle = undefined;
</script>

{#if stickyHeader}
  <section class:bx--data-table_inner-container="{true}" {...$$restProps}>
    <table
      class:bx--data-table="{true}"
      class:bx--data-table--compact="{size === 'compact'}"
      class:bx--data-table--short="{size === 'short'}"
      class:bx--data-table--tall="{size === 'tall'}"
      class:bx--data-table--md="{size === 'medium'}"
      class:bx--data-table--sort="{sortable}"
      class:bx--data-table--zebra="{zebra}"
      class:bx--data-table--static="{useStaticWidth}"
      class:bx--data-table--sticky-header="{stickyHeader}"
      style="{tableStyle}"
    >
      <slot />
    </table>
  </section>
{:else}
  <table
    class:bx--data-table="{true}"
    class:bx--data-table--compact="{size === 'compact'}"
    class:bx--data-table--short="{size === 'short'}"
    class:bx--data-table--tall="{size === 'tall'}"
    class:bx--data-table--md="{size === 'medium'}"
    class:bx--data-table--sort="{sortable}"
    class:bx--data-table--zebra="{zebra}"
    class:bx--data-table--static="{useStaticWidth}"
    class:bx--data-table--sticky-header="{stickyHeader}"
    {...$$restProps}
    style="{tableStyle}"
  >
    <slot />
  </table>
{/if}