import{_ as n}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as e,o as l}from"./app-C6w_Pklu.js";const i={};function p(d,s){return l(),a("div",null,s[0]||(s[0]=[e(`

Basic usage

Display an array of data objects.

<template>
  <ds-table :data="tableData">
  </ds-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            name: 'Rengar',
            type: 'Jungler',
            loves: 'Hide and seek'
          },
          {
            name: 'Renekton',
            type: 'Toplaner',
            loves: 'Slice and dice'
          },
          {
            name: 'Twitch',
            type: 'ADC',
            loves: 'Spray and pray'
          },
          {
            name: 'Blitz',
            type: 'Support',
            loves: 'Hook you up'
          }
        ]
      }
    }
  }
</script>

Specify fields

You can specify which fields to display

<template>
  <ds-table :data="tableData" :fields="tableFields">
  </ds-table>
</template>

<script>
  export default {
    data() {
      return {
        tableFields: ['name', 'type'],
        tableData: [
          {
            name: 'Rengar',
            type: 'Jungler',
            loves: 'Hide and seek'
          },
          {
            name: 'Renekton',
            type: 'Toplaner',
            loves: 'Slice and dice'
          },
          {
            name: 'Twitch',
            type: 'ADC',
            loves: 'Spray and pray'
          },
          {
            name: 'Blitz',
            type: 'Support',
            loves: 'Hook you up'
          }
        ]
      }
    }
  }
</script>

Customize header

You can customize the header by setting fields as an object.

The value can be a string representing the fields label or an object with options.

<template>
  <ds-table :data="tableData" :fields="tableFields">
  </ds-table>
</template>

<script>
  export default {
    data() {
      return {
        tableFields: {
          name: 'Hero',
          type: {
            label: 'Job',
            width: '300px',
            align: 'right'
          }
        },
        tableData: [
          {
            name: 'Rengar',
            type: 'Jungler',
            loves: 'Hide and seek'
          },
          {
            name: 'Renekton',
            type: 'Toplaner',
            loves: 'Slice and dice'
          },
          {
            name: 'Twitch',
            type: 'ADC',
            loves: 'Spray and pray'
          },
          {
            name: 'Blitz',
            type: 'Support',
            loves: 'Hook you up'
          }
        ]
      }
    }
  }
</script>

Custom columns

You can define custom templates for columns and create columns that do not have a corresponding data attribute.

Via scoped slots you have access to the columns row, index and col.

<template>
  <div>
    <ds-table :data="tableData" :fields="tableFields">
      <template slot="loves" slot-scope="scope">
        {{ scope.row.name }} loves {{ scope.row.loves }}
      </template>
      <template slot="edit" slot-scope="scope">
        <ds-button
          size="small"
          @click="deleteRow(scope.row)">delete</ds-button>
      </template>
    </ds-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableFields: ['name', 'type', 'loves', 'edit'],
        tableData: [
          {
            name: 'Rengar',
            type: 'Jungler',
            loves: 'Hide and seek'
          },
          {
            name: 'Renekton',
            type: 'Toplaner',
            loves: 'Slice and dice'
          },
          {
            name: 'Twitch',
            type: 'ADC',
            loves: 'Spray and pray'
          },
          {
            name: 'Blitz',
            type: 'Support',
            loves: 'Hook you up'
          }
        ]
      }
    },
    methods: {
      deleteRow(row) {
        const index = this.tableData.indexOf(row)
        if (index > -1) {
          this.tableData.splice(index, 1)
        }
      }
    }
  }
</script>
`,14)]))}const t=n(i,[["render",p],["__file","demo.html.vue"]]),r=JSON.parse(`{"path":"/styleguide/src/system/components/data-display/Table/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[]},{"level":2,"title":"Specify fields","slug":"specify-fields","link":"#specify-fields","children":[]},{"level":2,"title":"Customize header","slug":"customize-header","link":"#customize-header","children":[]},{"level":2,"title":"Custom columns","slug":"custom-columns","link":"#custom-columns","children":[]}],"git":{"createdTime":1772365170000,"updatedTime":1772365170000,"contributors":[{"name":"Ulf Gebhardt","email":"ulf.gebhardt@webcraft-media.de","commits":1}]},"readingTime":{"minutes":1.11,"words":333},"filePathRelative":"styleguide/src/system/components/data-display/Table/demo.md","localizedDate":"March 1, 2026","excerpt":"

Basic usage

\\n

Display an array of data objects.

\\n
<template>\\n  <ds-table :data=\\"tableData\\">\\n  </ds-table>\\n</template>\\n\\n<script>\\n  export default {\\n    data() {\\n      return {\\n        tableData: [\\n          {\\n            name: 'Rengar',\\n            type: 'Jungler',\\n            loves: 'Hide and seek'\\n          },\\n          {\\n            name: 'Renekton',\\n            type: 'Toplaner',\\n            loves: 'Slice and dice'\\n          },\\n          {\\n            name: 'Twitch',\\n            type: 'ADC',\\n            loves: 'Spray and pray'\\n          },\\n          {\\n            name: 'Blitz',\\n            type: 'Support',\\n            loves: 'Hook you up'\\n          }\\n        ]\\n      }\\n    }\\n  }\\n</script>
\\n
"}`);export{t as comp,r as data};