fbredius/storybook

View on GitHub
docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx

Summary

Maintainability
Test Coverage
```html
<!--Table.stories.svelte -->

<script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
  
  import Table from './Table.svelte';
</script>

<Meta
  title="Custom Table"
  component={Table}
  argTypes={{
    size: {
      options: ['small', 'medium', 'large'],
    },
  }}
/>

<Template let:args>
  <Table {...args}>
    <tbody>
      {#each args.data as row}
        <tr>
          {#each row as col}
            <td>{col}</td>
          {/each}
        </tr>
      {/each}
    </tbody>
  </Table>
</Template>

<!-- 👇 The data arg is for the story component and the remaining args get passed to the Table component -->
<Story
  name="Numeric"
  args={{
    data: [
      [1, 2, 3],
      [4, 5, 6],
    ],
    size: 'large',
  }}
/>
```