import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'
import { action } from '@storybook/addon-actions'
import BaseTable from '@/elements/table/BaseTable.vue'

<Meta title="Elements|Table" component={ BaseTable } />

# Table

<Props of={ BaseTable } />

<Preview>
  <Story name="Simple">
    {{
        components: { BaseTable },
        data () {
          return {
            template: [
              { key: 'id', label: 'ID' },
              { key: 'name', label: 'Name' }
            ],
            values: [
              { id: '1', name: 'Gianni' },
              { id: '2', name: 'Pico' },
              { id: '3', name: 'Luigi' }
            ]
          }
        },
        template: 
          `<div>
            <base-table :template="template" :values="values" />
          </div>`
    }}
  </Story>
</Preview>

```js
{
  template: [
    { key: 'id', label: 'ID' },
    { key: 'name', label: 'Name' }
  ],
  values: [
    { id: '1', name: 'Gianni' },
    { id: '2', name: 'Pico' },
    { id: '3', name: 'Luigi' }
  ]
}
```

```html
<base-table :template="template" :values="values" />
```

## Selectable table

<Preview>
  <Story name="Selectable">
    {{
        components: { BaseTable },
        data () {
          return {
            template: [
              { key: 'id', label: 'ID' },
              { key: 'name', label: 'Name' }
            ],
            values: [
              { id: '1', name: 'Gianni' },
              { id: '2', name: 'Pico' },
              { id: '3', name: 'Luigi' }
            ],
            selected: []
          }
        },
        template: 
          `<div>
            <base-table :selectable="true" :selected="selected" metakey="id" @change="onChange" :template="template" :values="values" />
          </div>`,
        methods: {
          onChange ($event) {
            this.selected = $event.value
          }
        }
    }}
  </Story>
</Preview>