1<template>
2  <ApiDataTable
3    :columns="columns"
4    :is-paginated="true"
5    :is-searchable="true"
6    :api-endpoint="https://api.skilljar.com/example"
7    :filters="filters"
8  >
9    <template #filters>
10      <div>
11        <DataChartSelectFilter 
12          v-model="filters.example" 
13          :provider="provider" 
14        />
15      </div>
16    </template>
17  </ApiDataTable>
18</template>
19
20<script setup>
21const columns = [{
22  title: 'Example',
23  key: 'example',
24  sortable: true
25}]
26const { filters } = useDataTableFilters({ columns })
27const { provider } = new StaticDataProvider([ 'one', 'two' ])
28</script>

1<template>
2  <DataTable :data="data" :loading-state="loadingState" :error="error"></DataTable>
3</template>
4
5<script setup>
6import { useDataTableApiMethod } from '@/composables/DataTable'
7
8const { data, error, loadingState } = useDataTableMethod({ 
9  method: ApiService.Example.dataTable
10})
11</script>

1<template>
2  <div>
3    <DataTable v-if="isDataTable" :data="data" :error="error" :loading-state="loadingState" />
4    <DataChart v-else :data="data" :error="error" :loading-state="loadingState" />
5  </div>
6</template>
7
8<script setup>
9const { data, error, loadingState } = useDataTableMethod({ 
10  method: ApiService.Example.dataTable
11})
12</script>

1<template>
2  <DataTable :data="data">
3    <template #paginator>
4      <Paginator v-model="paginator" />
5    </template>
6  </DataTable>
7</template>
8
9<script setup>
10import { useDataTablePaginator, useDataTableApiMethod } from '@/composables/DataTable'
11
12const { paginator } = useDataTablePagination({
13  perPageOptions: [10, 25, 50, 75, 100]
14})
15
16const { data } = useDataTableMethod({ 
17  method: ApiService.Example.dataTable,
18  paginator,
19})
20</script>

1<template>
2  <DataTable :data="data">
3    <slot #csv>
4      <DataTableCSVDownloadButton @click="downloadCSV" />
5    </slot>
6  </DataTable>
7</template>
8
9<script setup>
10import { DataTable, DataTableCSVDownloadButton } from '@/components/DataTable'
11
12const { data, downloadCSV } = useDataTableMethod({ 
13  method: ApiService.Example.dataTable 
14});
15</script>

1<template>
2  <DataTableCell>
3    <SecondaryIcon :href="myHref" :aria-label="ariaLabel" />
4  </DataTableCell>
5</template>
6
7<script setup>
8const { ariaLabel, myHref } = defineProps({
9  ariaLabel: 'string',
10  myHref: 'string',
11})
12</script>

1<template>
2  <DataTable :columns="columns" :data="data" />
3</template>
4
5<script setup>
6import MyCell from './MyCell'
7
8const columns = [
9  { title: 'Example', key: 'example', component: MyCell },
10  { title: 'Other', key: 'other' }
11]
12const data = { count: 1, results: [{ example: { myHref: '...', ariaLabel: '...' }, other: 12 }] }
13</script>

1<template>
2  <div>
3    <DataTable :data="data" @select-row="selectRow" :selected-rows="selectedRows" />
4    <Button onclick="postSelectedRows">Post Selected Rows</Button>
5  <div>
6</template>
7
8<script setup>
9const { data } = useDataTableMethod({ 
10  method: ApiService.Example.dataTable 
11})
12const { selectRow, selectedRows } = useDataTableRowSelector({ data })
13const postSelectedRows = () => { ApiService.Example.postSelectedRows(selectedRows) }
14<script>

1<template>
2  <Table>
3    <template #header>
4      <TableHeader>
5        <TableRow>{{ label }}</TableRow>
6      </TableHeader>
7    </template>
8    <template #body>
9      <TableBody>
10        <TableRow>{{ value }}</TableRow>
11      </TableBody>
12    </template>
13  </Table>
14</template>