untitled

Profile

Table

Table Props

Normal

Tehble
Name Email
data 1 data 2 data 4
data 1 data 2 data 4
data 1 data 2 data 4
data 1 data 2 data 4

html 

<Table {headers} {data} {caption} {alternate} {borderless} {hideCaption} />

// to override the cell templates
<Table {headers} {data} {caption} {alternate} {borderless} {hideCaption}>
  <svelte:fragment slot="header" let:header>
    {#if header && header.value === 'Actions'}
      <Button on:click={() => console.log(header)}>
        {header.value}
      </Button>
    {:else}
      {header.value}
    {/if}
  </svelte:fragment>

  <svelte:fragment slot="cell" let:cell let:row let:header let:index let:rowIndex>
    {#if header && header.value === 'Actions'}
      <Button on:click={() => console.log(cell)}>
        {cell.value}
      </Button>
    {:else if header && header.value === 'Name'}
      <Link href='' on:click={() => console.log(rowIndex, row)}>
        {cell.value}
      </Link>
    {:else}
      {cell.value}
    {/if}
  </svelte:fragment>
</Table>

script 

let caption = 'Tehble';
let headers: IHeader[] = [{
  scope: 'col',
  value: 'Name',
},{
  scope: 'col',
  value: 'Name',
},{
  scope: 'col',
  value: 'Email',
},{
  span: { colspan: 2, rowspan: 1 },
  scope: 'col',
  value: 'Actions',
}];
let data: ICell[][] = [
  [{ value: 'data 1' }, { value: 'data 2' }, { value: 'data 3' }, { value: 'data 4' }],
  [{ value: 'data 1' }, { value: 'data 2' }, { value: 'data 3' }, { value: 'data 4' }],
  [{ value: 'data 1' }, { value: 'data 2' }, { value: 'data 3' }, { value: 'data 4' }],
  [{ value: 'data 1' }, { value: 'data 2' }, { value: 'data 3' }, { value: 'data 4' }],
];