DataTable 数据表格

<script setup lang="ts">
  import { Avatar, DataTable, Inline, Progress, Stack, Tag, Text } from '@hina-ui/vue'
  import { tableDemo } from '../../data-table'
  const { rows, columns, statusLabels } = tableDemo('zh-CN')
</script>

<template>
  <DataTable :rows="rows.slice(0, 5)" :columns="columns" row-key="id" label="条目列表">
    <template #cell-name="{ row }">
      <Inline gap="sm" :wrap="false" class="min-w-36 py-2">
        <Avatar :name="row.name.slice(-1)" size="sm" aria-hidden="true" />
        <Stack gap="none">
          <Text size="sm" weight="medium" class="whitespace-nowrap">{{ row.name }}</Text>
          <Text size="xs" tone="muted">ID {{ row.id }}</Text>
        </Stack>
      </Inline>
    </template>
    <template #cell-status="{ row }">
      <Tag :tone="row.status === 'active' ? 'success' : 'neutral'">
        {{ statusLabels[row.status] }}
      </Tag>
    </template>
    <template #cell="{ column, value }">
      <Inline v-if="column.key === 'count'" gap="sm" :wrap="false" class="min-w-32">
        <Progress
          :value="Number(value)"
          :max="150"
          :aria-label="column.label"
          size="sm"
          class="flex-1"
        />
        <Text size="sm" class="w-8 shrink-0 text-end tabular-nums">{{ value }}</Text>
      </Inline>
      <template v-else>{{ value }}</template>
    </template>
  </DataTable>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { DataTable, Text, Stack, type DataTableSort } from '@hina-ui/vue'
  import { tableDemo } from '../../data-table'
  const { rows, columns } = tableDemo('zh-CN')
  const sorting = ref<DataTableSort[]>([])
</script>

<template>
  <Stack class="w-full">
    <DataTable
      v-model:sorting="sorting"
      :rows="rows.slice(0, 6)"
      :columns="columns"
      row-key="id"
      multi-sort
      label="条目列表"
    />
    <Text size="sm" tone="muted">
      {{
        sorting.length
          ? sorting
              .map(
                sort =>
                  `${columns.find(column => column.key === sort.key)?.label ?? sort.key} ${sort.desc ? '降序' : '升序'}`,
              )
              .join(' · ')
          : '未排序'
      }}
    </Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { DataTable, SearchInput } from '@hina-ui/vue'
  import { tableDemo } from '../../data-table'
  const { rows, columns } = tableDemo('zh-CN')
  const filter = ref('')
</script>

<template>
  <DataTable
    v-model:filter="filter"
    :rows="rows"
    :columns="columns"
    row-key="id"
    pagination
    :page-size="5"
    label="条目列表"
  >
    <template #toolbar>
      <SearchInput
        size="sm"
        v-model="filter"
        placeholder="筛选名称"
        aria-label="筛选名称"
        class="w-64 max-w-full"
      />
    </template>
  </DataTable>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { DataTable, Select, type DataTableFilter } from '@hina-ui/vue'
  import { tableDemo } from '../../data-table'
  const { rows, columns, statusLabels } = tableDemo('zh-CN')
  const filters = ref<DataTableFilter[]>([])
  const options = Object.entries(statusLabels).map(([value, label]) => ({ value, label }))
  const filteredColumns = columns.map(column =>
    column.key === 'status' ? { ...column, filterMode: 'equals' as const } : column,
  )
</script>

<template>
  <DataTable
    v-model:column-filters="filters"
    :rows="rows"
    :columns="filteredColumns"
    row-key="id"
    pagination
    :page-size="5"
    label="条目列表"
  >
    <template #header-status="{ column, filterValue, setFilter }">
      <Select
        :model-value="filterValue === undefined ? undefined : String(filterValue)"
        :options="options"
        :placeholder="column.label"
        :aria-label="column.label"
        clearable
        size="sm"
        class="w-36 py-1"
        @update:model-value="setFilter"
      />
    </template>
  </DataTable>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, DataTable, Inline, Text, type DataTableKey } from '@hina-ui/vue'
  import { tableDemo } from '../../data-table'
  const { rows, columns } = tableDemo('zh-CN')
  const selected = ref<DataTableKey[]>([1])
</script>

<template>
  <DataTable
    v-model:selected="selected"
    :rows="rows"
    :columns="columns"
    row-key="id"
    row-label="name"
    :selectable="row => row.status !== 'archived'"
    pagination
    :page-size="5"
    label="条目列表"
  >
    <template #toolbar>
      <Inline align="center" justify="between">
        <Text size="sm" tone="muted">已选：{{ selected.length }}</Text>
        <Button
          variant="ghost"
          tone="neutral"
          size="sm"
          :disabled="!selected.length"
          @click="selected = []"
        >
          清空选择
        </Button>
      </Inline>
    </template>
  </DataTable>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { DataTable, type DataTableKey } from '@hina-ui/vue'
  import { tableDemo } from '../../data-table'
  const { rows, columns } = tableDemo('zh-CN')
  const selected = ref<DataTableKey[]>([2])
</script>

<template>
  <DataTable
    v-model:selected="selected"
    :rows="rows.slice(0, 4)"
    :columns="columns"
    row-key="id"
    row-label="name"
    selectable
    selection-mode="single"
    label="条目列表"
  />
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { DataTable, Pagination } from '@hina-ui/vue'
  import { tableDemo } from '../../data-table'
  const { rows, columns } = tableDemo('zh-CN')
  const page = ref(1)
  const pageSize = ref(5)
</script>

<template>
  <DataTable
    v-model:page="page"
    v-model:page-size="pageSize"
    :rows="rows"
    :columns="columns"
    row-key="id"
    pagination
    label="条目列表"
  >
    <template #footer="{ total, rows: visible }">
      <Pagination
        v-model="page"
        v-model:page-size="pageSize"
        :total="total"
        :item-count="visible.length"
        :page-size-options="[5, 10, 20]"
        show-info
        show-jump
        align="between"
      />
    </template>
  </DataTable>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { DataTable, SearchInput, Text, Tag, Inline } from '@hina-ui/vue'
  import { useRemoteTableDemo } from '../../data-table'
  const { rows, columns, statusLabels, total, loading, lastQuery, load } =
    useRemoteTableDemo('zh-CN')
  const filter = ref('')
</script>

<template>
  <DataTable
    v-model:filter="filter"
    :rows="rows"
    :columns="columns"
    :total="total"
    :loading="loading"
    row-key="id"
    manual
    pagination
    :page-size="5"
    label="条目列表"
    @change="load"
  >
    <template #toolbar>
      <Inline justify="between">
        <SearchInput
          size="sm"
          v-model="filter"
          placeholder="搜索名称"
          aria-label="搜索名称"
          class="w-64 max-w-full"
        />
        <Text size="sm" tone="muted">
          请求页 {{ lastQuery.page }} · 返回 {{ rows.length }} / {{ total }}
        </Text>
      </Inline>
    </template>
    <template #cell-status="{ row }">
      <Tag :tone="row.status === 'active' ? 'success' : 'neutral'">
        {{ statusLabels[row.status] }}
      </Tag>
    </template>
  </DataTable>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { DataTable } from '@hina-ui/vue'
  import { useRemoteTableDemo } from '../../data-table'
  const { rows, columns, loading, total, lastQuery, load } = useRemoteTableDemo('zh-CN')
  const hasNextPage = computed(() => lastQuery.value.page * lastQuery.value.pageSize < total.value)
</script>

<template>
  <DataTable
    :rows="rows"
    :columns="columns"
    row-key="id"
    manual
    pagination
    :page-size="5"
    :has-next-page="hasNextPage"
    :loading="loading"
    label="条目列表"
    @change="load"
  />
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { Checkbox, DataTable } from '@hina-ui/vue'
  import { tableDemo } from '../../data-table'
  const { rows, columns } = tableDemo('zh-CN')
  const showCount = ref(true)
  const hiddenColumns = computed(() => (showCount.value ? [] : ['count']))
</script>

<template>
  <DataTable
    :rows="rows.slice(0, 4)"
    :columns="columns"
    :hidden-columns="hiddenColumns"
    row-key="id"
    label="条目列表"
  >
    <template #toolbar><Checkbox v-model="showCount">显示数量列</Checkbox></template>
  </DataTable>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import {
    DataTable,
    Stack,
    Inline,
    Text,
    Select,
    Button,
    type DataTableColumn,
  } from '@hina-ui/vue'
  import { tableDemo, type TableDemoRow } from '../../data-table'
  const { rows, columns } = tableDemo('zh-CN')
  const mode = ref<'fit' | 'expand'>('fit')
  const modes = [
    { value: 'fit', label: '保持总宽' },
    { value: 'expand', label: '仅调整当前列' },
  ]
  const order = ref<string[]>([])
  const widths = ref<Record<string, number>>({})
  const sizedColumns: DataTableColumn<TableDemoRow>[] = [
    { key: 'id', label: 'ID', width: 72, pin: 'start', reorderable: false },
    { ...columns[0]!, width: 220, minWidth: 120, maxWidth: 360, truncate: true },
    { ...columns[1]!, width: 180 },
    { ...columns[2]!, width: 140, pin: 'end', reorderable: false },
  ]
  const longRows = rows
    .slice(0, 4)
    .map(row => ({ ...row, name: `${row.name} — 这是一段会随列宽变化而截断的名称` }))
</script>

<template>
  <Stack gap="sm" class="w-full">
    <Inline justify="between">
      <Inline gap="sm">
        <Text size="sm" tone="muted">调宽模式</Text>
        <Select v-model="mode" :options="modes" size="sm" class="w-44" aria-label="调宽模式" />
      </Inline>
      <Button
        size="sm"
        variant="ghost"
        tone="neutral"
        :disabled="!order.length && !Object.keys(widths).length"
        @click="
          () => {
            order = []
            widths = {}
          }
        "
      >
        恢复列布局
      </Button>
    </Inline>
    <DataTable
      v-model:column-order="order"
      v-model:column-widths="widths"
      :rows="longRows"
      :columns="sizedColumns"
      row-key="id"
      resizable
      :resize-mode="mode"
      reorder-columns
      label="条目列表"
    />
  </Stack>
</template>

<script setup lang="ts">
  import { DataTable, type DataTableColumn } from '@hina-ui/vue'
  import { tableDemo, type TableDemoRow } from '../../data-table'
  const { rows, columns } = tableDemo('zh-CN')
  const groupedColumns: DataTableColumn<TableDemoRow>[] = [
    { key: 'details', label: '基本信息', children: [columns[0]!, columns[1]!] },
    { ...columns[2]!, aggregate: 'sum', footer: true },
  ]
</script>

<template>
  <DataTable :rows="rows.slice(0, 5)" :columns="groupedColumns" row-key="id" label="条目列表">
    <template #footer-name>合计</template>
  </DataTable>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import {
    DescriptionList,
    DescriptionTerm,
    DescriptionDetails,
    DataTable,
    type DataTableKey,
  } from '@hina-ui/vue'
  import { tableDemo } from '../../data-table'
  const { rows, columns, statusLabels } = tableDemo('zh-CN')
  const expanded = ref<DataTableKey[]>([1])
</script>

<template>
  <DataTable
    v-model:expanded="expanded"
    :rows="rows.slice(0, 4)"
    :columns="columns"
    row-key="id"
    row-label="name"
    expandable
    label="条目列表"
  >
    <template #expansion="{ row }">
      <DescriptionList class="grid grid-cols-[auto_1fr] gap-x-6 gap-y-2 text-sm">
        <DescriptionTerm class="text-muted">ID</DescriptionTerm>
        <DescriptionDetails>{{ row.id }}</DescriptionDetails>
        <DescriptionTerm class="text-muted">状态</DescriptionTerm>
        <DescriptionDetails>{{ statusLabels[row.status] }}</DescriptionDetails>
        <DescriptionTerm class="text-muted">数量</DescriptionTerm>
        <DescriptionDetails>{{ row.count }}</DescriptionDetails>
      </DescriptionList>
    </template>
  </DataTable>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { DataTable, type DataTableKey } from '@hina-ui/vue'
  import { treeTableDemo } from '../../data-table'
  const { rows, columns, getChildren } = treeTableDemo('zh-CN')
  const selected = ref<DataTableKey[]>([4])
  const expanded = ref<DataTableKey[]>([1])
</script>

<template>
  <DataTable
    v-model:selected="selected"
    v-model:expanded="expanded"
    :rows="rows"
    :columns="columns"
    :get-children="getChildren"
    row-key="id"
    row-label="name"
    selectable
    label="条目列表"
  />
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { DataTable } from '@hina-ui/vue'
  import { tableDemo } from '../../data-table'
  const { rows, columns } = tableDemo('zh-CN')
  const grouping = ref(['status'])
  const expandedGroups = ref(['status:active'])
  const groupedColumns = columns.map(column =>
    column.key === 'count' ? { ...column, aggregate: 'sum' as const } : column,
  )
</script>

<template>
  <DataTable
    v-model:grouping="grouping"
    v-model:expanded-groups="expandedGroups"
    :rows="rows.slice(0, 8)"
    :columns="groupedColumns"
    row-key="id"
    label="条目列表"
  ></DataTable>
</template>

<script setup lang="ts">
  import { Checkbox, DataTable, Select, Inline } from '@hina-ui/vue'
  import { useEditableTableDemo } from '../../data-table'
  const { rows, columns, statusLabels, mode, fail, save } = useEditableTableDemo('zh-CN')
  const modes = [
    { value: 'cell', label: '单元格' },
    { value: 'row', label: '整行' },
  ]
  const options = Object.entries(statusLabels).map(([value, label]) => ({ value, label }))
</script>

<template>
  <DataTable
    :rows="rows"
    :columns="columns"
    row-key="id"
    row-label="name"
    :edit-mode="mode"
    :on-save="save"
    layout="fixed"
    label="条目列表"
  >
    <template #toolbar>
      <Inline align="center" wrap>
        <Select size="sm" v-model="mode" :options="modes" aria-label="编辑模式" class="w-32" />
        <Checkbox v-model="fail">模拟保存失败</Checkbox>
      </Inline>
    </template>
    <template #editor-status="{ value, updateValue, pending }">
      <Select
        :model-value="value as string"
        :options="options"
        :disabled="pending"
        aria-label="状态"
        size="sm"
        @update:model-value="updateValue"
      />
    </template>
  </DataTable>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { DataTable } from '@hina-ui/vue'
  import { tableDemo } from '../../data-table'
  const source = tableDemo('zh-CN')
  const rows = ref(source.rows.slice(0, 5))
  const columns = source.columns.map(column => ({ ...column, sortable: false }))
</script>

<template>
  <DataTable
    v-model:rows="rows"
    :columns="columns"
    row-key="id"
    row-label="name"
    reorderable
    label="条目列表"
  />
</template>

<script setup lang="ts">
  import { DataTable } from '@hina-ui/vue'
  import { tableDemo } from '../../data-table'
  const { rows, columns } = tableDemo('zh-CN')
  const wideColumns = columns.map(column => ({
    ...column,
    width: column.key === 'name' ? 320 : 200,
  }))
</script>

<template>
  <DataTable
    :rows="rows"
    :columns="wideColumns"
    row-key="id"
    sticky-header
    :max-height="240"
    label="条目列表"
  />
</template>

<script setup lang="ts">
  import { Stack, DataTable } from '@hina-ui/vue'
  import { tableDemo } from '../../data-table'
  const { rows, columns } = tableDemo('zh-CN')
  const summaryColumns = columns.map(column =>
    column.key === 'count' ? { ...column, aggregate: 'sum' as const, footer: true } : column,
  )
</script>

<template>
  <Stack class="h-80 w-full">
    <DataTable
      :rows="rows"
      :columns="summaryColumns"
      row-key="id"
      fill
      sticky-header
      sticky-footer
      pagination
      :page-size="15"
      label="条目列表"
    >
      <template #footer-name>合计</template>
    </DataTable>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, DataTable, Inline, type DataTableKey } from '@hina-ui/vue'
  import { tableDemo } from '../../data-table'
  const { rows, columns } = tableDemo('zh-CN')
  const selected = ref<DataTableKey[]>([1, 2])
</script>

<template>
  <DataTable
    v-model:selected="selected"
    :rows="rows.slice(0, 5)"
    :columns="columns"
    row-key="id"
    row-label="name"
    selectable
    label="条目列表"
  >
    <template #toolbar="{ api }">
      <Inline wrap>
        <Button
          size="sm"
          variant="soft"
          tone="neutral"
          @click="api.exportCsv({ formatted: true, filename: 'entries.csv' })"
        >
          导出 CSV
        </Button>
        <Button
          size="sm"
          variant="ghost"
          tone="neutral"
          :disabled="!selected.length"
          @click="api.exportCsv({ scope: 'selected', formatted: true, filename: 'selected.csv' })"
        >
          导出所选
        </Button>
      </Inline>
    </template>
  </DataTable>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, DataTable, Empty, Stack } from '@hina-ui/vue'
  import { tableDemo } from '../../data-table'
  const { rows, columns } = tableDemo('zh-CN')
  const loading = ref(false)
</script>

<template>
  <Stack class="w-full">
    <Button size="sm" variant="soft" tone="neutral" class="self-start" @click="loading = !loading">
      切换加载状态
    </Button>
    <DataTable
      :rows="rows.slice(0, 3)"
      :columns="columns"
      row-key="id"
      :loading="loading"
      label="条目列表"
    />
    <DataTable :rows="[]" :columns="columns" row-key="id" label="条目列表">
      <template #empty><Empty size="sm" title="暂无条目" :icon="false" /></template>
    </DataTable>
  </Stack>
</template>