Table 表格 ​

<script setup lang="ts">
import { reactive } from 'vue'

// 在 typescript 时可以使用辅助函数来帮助类型推导
import { defineTableColumns } from 'vexip-ui'

const currentYear = new Date().getFullYear()

const columns = reactive(
  defineTableColumns([
    {
      name: 'First Name',
      key: 'firstName',
      maxWidth: 200,
    },
    {
      name: 'Last Name',
      key: 'lastName',
      maxWidth: 200,
    },
    {
      name: 'Job',
      key: 'job',
      accessor: row => row.job,
      formatter: job => `Good ${job}`,
      width: '15%',
    },
    {
      name: 'Age',
      key: 'age',
      formatter: age => `${age} (${currentYear - age})`,
      width: '10%',
      minWidth: 120,
    },
    {
      name: 'Email',
      key: 'email',
    },
  ]),
)

const data = reactive(
  Array.from({ length: 5 }, (_, index) => {
    return {
      id: index + 1,
      firstName: `First ${index}`,
      lastName: `Last ${index}`,
      company: `Company ${index}`,
      job: `Job ${index}`,
      age: 20 + index,
      email: `email${index}@vexip.ui`,
      address: `Address ${index}`,
    }
  }),
)
</script>

<template>
  <Table :columns="columns" :data="data" :width="1000"></Table>
</template>

<script setup lang="ts">
import { h, reactive } from 'vue'

import { User } from '@vexip-ui/icons'

interface RowData {
  id: string,
  job: string,
  email: string,
  firstName: string,
  lastName: string,
  age: string,
}

const columns = reactive([
  {
    name: 'Last Name',
    key: 'lastName',
    order: 1,
  },
])
const data = reactive(
  Array.from({ length: 5 }, (_, index) => {
    return {
      id: index + 1,
      firstName: `First ${index}`,
      lastName: `Last ${index}`,
      company: `Company ${index}`,
      job: `Job ${index}`,
      age: 20 + index,
      email: `email${index}@vexip.ui`,
      address: `Address ${index}`,
    }
  }),
)

function jobAccessor(row: RowData) {
  return row.job
}

function jobFormatter(job: string) {
  return `Good ${job}`
}

function handleAgeClick() {
  console.info('clicked')
}

function renderAge({ row }: { row: RowData }) {
  return h(
    'span',
    {
      class: 'my-age',
      onClick: handleAgeClick,
    },
    ['age: ', row.age],
  )
}
</script>

<template>
  <Table :columns="columns" :data="data" :width="1000">
    <TableColumn name="First Name" id-key="firstName" :order="0">
      <template #default="{ row }">
        <Icon style="margin-inline-end: 8px">
          <User></User>
        </Icon>
        {{ row.firstName }}
      </template>
    </TableColumn>
    <TableColumn
      name="Job"
      id-key="job"
      :accessor="jobAccessor"
      :order="3"
      :formatter="jobFormatter"
    ></TableColumn>
    <TableColumn
      name="Age"
      id-key="age"
      :order="2"
      :renderer="renderAge"
    ></TableColumn>
  </Table>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

import { defineTableColumns } from 'vexip-ui'

const columns = reactive(
  defineTableColumns([
    {
      name: 'First Name',
      key: 'firstName',
    },
    {
      name: 'Last Name',
      key: 'lastName',
    },
    {
      name: 'Job',
      key: 'job',
      accessor(row) {
        return row.job
      },
    },
    {
      name: 'Age',
      key: 'age',
    },
  ]),
)

const data = reactive(
  Array.from({ length: 5 }, (_, index) => {
    return {
      id: index + 1,
      firstName: `First ${index}`,
      lastName: `Last ${index}`,
      company: `Company ${index}`,
      job: `Job ${index}`,
      age: 20 + index,
      email: `email${index}@vexip.ui`,
      address: `Address ${index}`,
    }
  }),
)
</script>

<template>
  <Table
    stripe
    border
    highlight
    :columns="columns"
    :data="data"
    :width="1000"
  ></Table>
  <br />
  <Table
    transparent
    highlight
    :columns="columns"
    :data="data"
    :width="1000"
  ></Table>
</template>

<script setup lang="ts">
import type { TableCellPropFn, TableHeadPropFn } from 'vexip-ui'

type ItemType<D> = D extends (infer I)[] ? I : Record<string, any>

const data = Array.from({ length: 5 }, (_, index) => {
  return {
    id: index + 1,
    firstName: `First ${index}`,
    lastName: `Last ${index}`,
    company: `Company ${index}`,
    job: `Job ${index}`,
    age: 20 + index,
    email: `email${index}@vexip.ui`,
    address: `Address ${index}`,
  }
})

const headClass: TableHeadPropFn = ({ index }) => `head-${index}`

const headStyle: TableHeadPropFn = ({ index }) => ({
  color: `var(--vxp-color-error-opacity-${index + 1})`,
})

const hadeAttrs: TableHeadPropFn = ({ index }) => ({
  'data-index': index,
})

const cellClass: TableCellPropFn<ItemType<typeof data>> = ({ rowIndex, columnIndex }) =>
  `cell-${rowIndex}-${columnIndex}`
</script>

<template>
  <Table
    :data="data"
    row-class="demo-row-class"
    :width="1000"
    :head-class="headClass"
    :head-style="headStyle"
    :head-attrs="hadeAttrs"
    :cell-class="cellClass"
  >
    <TableColumn
      name="First Name"
      id-key="firstName"
      :attrs="{ 'data-label': 'First Name' }"
    ></TableColumn>
    <TableColumn name="Last Name" id-key="lastName" class="demo-column-class"></TableColumn>
    <TableColumn name="Job" id-key="job" style="font-weight: bold"></TableColumn>
    <TableColumn name="Age" id-key="age"></TableColumn>
  </Table>
</template>

<style scoped>
:deep(.demo-row-class) {
  color: var(--vxp-color-primary-opacity-3);
}

:deep(.demo-column-class) {
  background-color: var(--vxp-color-warning-opacity-6);
}
</style>

<script setup lang="ts">
import { FaceGrinTearsR } from '@vexip-ui/icons'
</script>

<template>
  <Table :width="1000">
    <TableColumn name="First Name" id-key="firstName"></TableColumn>
    <TableColumn name="Last Name" id-key="lastName"></TableColumn>
    <TableColumn name="Job" id-key="job"></TableColumn>
    <TableColumn name="Age" id-key="age"></TableColumn>
  </Table>
  <br />
  <Table :width="1000">
    <TableColumn name="First Name" id-key="firstName"></TableColumn>
    <TableColumn name="Last Name" id-key="lastName"></TableColumn>
    <TableColumn name="Job" id-key="job"></TableColumn>
    <TableColumn name="Age" id-key="age"></TableColumn>
    <template #empty>
      <Icon :scale="3">
        <FaceGrinTearsR></FaceGrinTearsR>
      </Icon>
      <span style="font-size: 18px"> 空空如也 </span>
    </template>
  </Table>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import type { TableCellPayload, TableRowPayload } from 'vexip-ui'

const currentRow = ref(-1)
const menuRow = ref(-1)
const currentCell = ref([-1, -1])
const clickedCell = ref([-1, -1])
const dblclickedCell = ref([-1, -1])

const data = Array.from({ length: 5 }, (_, index) => {
  return {
    id: index + 1,
    firstName: `First ${index}`,
    lastName: `Last ${index}`,
    company: `Company ${index}`,
    job: `Job ${index}`,
    age: 20 + index,
    email: `email${index}@vexip.ui`,
    address: `Address ${index}`,
  }
})

function handleRowEnter(payload: TableRowPayload) {
  currentRow.value = payload.index
}

function handleRowContextmenu(payload: TableRowPayload) {
  payload.event.preventDefault()

  menuRow.value = payload.index
}

function handleCellEnter(payload: TableCellPayload) {
  currentCell.value[0] = payload.rowIndex
  currentCell.value[1] = payload.columnIndex
}

function handleCellClick(payload: TableCellPayload) {
  clickedCell.value[0] = payload.rowIndex
  clickedCell.value[1] = payload.columnIndex
}

function handleCellDblclick(payload: TableCellPayload) {
  dblclickedCell.value[0] = payload.rowIndex
  dblclickedCell.value[1] = payload.columnIndex
}
</script>

<template>
  <Table
    :data="data"
    :width="1000"
    @row-enter="handleRowEnter"
    @row-contextmenu="handleRowContextmenu"
    @cell-enter="handleCellEnter"
    @cell-click="handleCellClick"
    @cell-dblclick="handleCellDblclick"
  >
    <TableColumn name="First Name" id-key="firstName"></TableColumn>
    <TableColumn name="Last Name" id-key="lastName"></TableColumn>
    <TableColumn name="Job" id-key="job"></TableColumn>
    <TableColumn name="Age" id-key="age"></TableColumn>
  </Table>
  <p>当前行：{{ currentRow }}</p>
  <p>打开菜单的行：{{ menuRow }}</p>
  <p>当前单元格：{{ currentCell }}</p>
  <p>点击了的单元格：{{ clickedCell }}</p>
  <p>双击了的单元格：{{ dblclickedCell }}</p>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import type { TableExposed } from 'vexip-ui'

const table = ref<TableExposed>()

const data = Array.from({ length: 5 }, (_, index) => {
  return {
    id: index + 1,
    checked: false,
    firstName: `First ${index}`,
    lastName: `Last ${index}`,
    company: `Company ${index}`,
    job: `Job ${index}`,
    age: 20 + index,
    email: `email${index}@vexip.ui`,
    address: `Address ${index}`,
  }
})

data[1].checked = true

function getSelectedRows() {
  console.info(table.value?.getSelected() ?? [])
}
</script>

<template>
  <Table ref="table" :data="data" :width="1000">
    <TableColumn type="selection" id-key="selection"></TableColumn>
    <TableColumn name="First Name" id-key="firstName"></TableColumn>
    <TableColumn name="Last Name" id-key="lastName"></TableColumn>
    <TableColumn name="Job" id-key="job"></TableColumn>
    <TableColumn name="Age" id-key="age"></TableColumn>
  </Table>
  <Button style="margin-top: 10px" @click="getSelectedRows">
    获取选择的行
  </Button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import type { TableExposed } from 'vexip-ui'

const table = ref<TableExposed>()

const data = Array.from({ length: 5 }, (_, index) => {
  return {
    id: index + 1,
    firstName: `First ${index}`,
    lastName: `Last ${index}`,
    company: `Company ${index}`,
    job: `Job ${index}`,
    age: 20 + index,
    email: `email${index}@vexip.ui`,
    address: `Address ${index}`,
  }
})

function getSelectedRow() {
  console.info(table.value?.getSelected()?.[0])
}
</script>

<template>
  <Table ref="table" :data="data" :width="1000">
    <TableColumn type="selection" id-key="selection" single-select></TableColumn>
    <TableColumn name="First Name" id-key="firstName"></TableColumn>
    <TableColumn name="Last Name" id-key="lastName"></TableColumn>
    <TableColumn name="Job" id-key="job"></TableColumn>
    <TableColumn name="Age" id-key="age"></TableColumn>
  </Table>
  <Button style="margin-top: 10px" @click="getSelectedRow">
    获取选择的行
  </Button>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

import { defineTableColumns } from 'vexip-ui'

const columns = reactive(
  defineTableColumns([
    {
      name: 'Order',
      type: 'order',
      key: 'order',
    },
    {
      name: 'First Name',
      key: 'firstName',
    },
    {
      name: 'Last Name',
      key: 'lastName',
    },
    {
      name: 'Job',
      key: 'job',
    },
    {
      name: 'Age',
      key: 'age',
    },
  ]),
)
const data = reactive(
  Array.from({ length: 5 }, (_, index) => {
    return {
      id: index + 1,
      firstName: `First ${index}`,
      lastName: `Last ${index}`,
      company: `Company ${index}`,
      job: `Job ${index}`,
      age: 20 + index,
      email: `email${index}@vexip.ui`,
      address: `Address ${index}`,
    }
  }),
)
</script>

<template>
  <Table :columns="columns" :data="data" :width="1000"></Table>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

import type { TableRowPayload } from 'vexip-ui'

const data = reactive(
  Array.from({ length: 5 }, (_, index) => {
    return {
      id: index + 1,
      expanded: false,
      firstName: `First ${index}`,
      lastName: `Last ${index}`,
      company: `Company ${index}`,
      job: `Job ${index}`,
      age: 20 + index,
      email: `email${index}@vexip.ui`,
      address: `Address ${index}`,
    }
  }),
)

data[1].expanded = true

function handleExpand({ row, expanded }: TableRowPayload) {
  console.info(row, expanded!)
}
</script>

<template>
  <Table
    use-x-bar
    :data="data"
    :width="1000"
    @row-expand="handleExpand"
  >
    <TableColumn type="expand" id-key="expand">
      <template #default="{ row }">
        <Grid>
          <Cell :width="12">
            Full Name: {{ `${row.firstName} ${row.lastName}` }}
          </Cell>
          <Cell :width="12">
            Age: {{ row.age }}
          </Cell>
          <Cell :width="12">
            Job: {{ row.job }}
          </Cell>
          <Cell :width="12">
            Email: {{ row.email }}
          </Cell>
        </Grid>
      </template>
    </TableColumn>
    <TableColumn name="First Name" id-key="firstName"></TableColumn>
    <TableColumn name="Last Name" id-key="lastName"></TableColumn>
    <TableColumn name="Job" id-key="job"></TableColumn>
    <TableColumn name="Age" id-key="age"></TableColumn>
  </Table>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

import { defineTableColumns } from 'vexip-ui'

import type { TableSorterProfile } from 'vexip-ui'

const columns = reactive(
  defineTableColumns([
    { type: 'selection' },
    {
      type: 'order',
      name: '#',
    },
    {
      name: 'First Name',
      key: 'firstName',
    },
    {
      name: 'Last Name',
      key: 'lastName',
    },
    {
      name: 'Job',
      key: 'job',
    },
    {
      name: 'Value',
      key: 'value',
      sorter: {
        type: 'desc',
      },
    },
    {
      name: 'Age',
      key: 'age',
      sorter: {
        type: 'asc',
      },
    },
  ]),
)

const data = Array.from({ length: 5 }, (_, index) => {
  return {
    id: index + 1,
    firstName: `First ${index}`,
    lastName: `Last ${index}`,
    company: `Company ${index}`,
    job: `Job ${index}`,
    age: 20 + Math.round(40 * Math.random()),
    value: index % 2,
    email: `email${index}@vexip.ui`,
    address: `Address ${index}`,
  }
})

function handleRowSort(profiles: TableSorterProfile[]) {
  console.info(profiles)
}
</script>

<template>
  <Table
    :columns="columns"
    :data="data"
    :width="1000"
    @row-sort="handleRowSort"
  ></Table>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { defineTableColumns, defineTableFilter } from 'vexip-ui'
import { Filter } from '@vexip-ui/icons'

import type { TableExposed, TableFilterProfile } from 'vexip-ui'

interface RowData {
  id: string,
  job: string,
  email: string,
  firstName: string,
  lastName: string,
  age: string,
}

const jobSearch = ref('')

const table = ref<TableExposed>()

const columns = defineTableColumns([
  { type: 'selection' },
  {
    type: 'order',
    name: '#',
  },
  {
    name: 'First Name',
    key: 'firstName',
    filter: defineTableFilter({
      options: [
        { label: 'Starts with A', value: 'A' },
        { label: 'Starts with E', value: 'E' },
      ],
      method: (value, row: RowData) => {
        return row.firstName.startsWith(value)
      },
    }),
  },
  {
    name: 'Last Name',
    key: 'lastName',
    filter: defineTableFilter({
      options: [
        { label: 'Starts with D', value: 'D' },
        { label: 'Starts with F', value: 'F' },
        { label: 'Starts with R', value: 'R' },
        { label: 'Starts with T', value: 'T' },
      ],
      multiple: true,
      method: (values, row: RowData) => {
        for (const value of values) {
          if (row.lastName.startsWith(value)) {
            return true
          }
        }

        return false
      },
    }),
  },
  {
    name: 'Job',
    key: 'job',
  },
])

const ageFilter = defineTableFilter({
  custom: true,
  meta: {
    values: [NaN, NaN],
  },
  method: (value: number[], row: RowData) => {
    const age = parseFloat(row.age)
    return age >= value[0] && age <= value[1]
  },
})

const data = ref([
  {
    id: '1',
    job: 'Cashier',
    email: 'Angelique_Walsh2268@twace.org',
    firstName: 'Angelique',
    lastName: 'Walsh',
    age: '58',
  },
  {
    id: '2',
    job: 'Stockbroker',
    email: 'Aeris_Drake5867@gmail.com',
    firstName: 'Aeris',
    lastName: 'Drake',
    age: '40',
  },
  {
    id: '3',
    job: 'Machine Operator',
    email: 'Elisabeth_Rogers7566@sheye.org',
    firstName: 'Elisabeth',
    lastName: 'Rogers',
    age: '56',
  },
  {
    id: '4',
    job: 'Audiologist',
    email: 'Sharon_Tanner5855@nickia.com',
    firstName: 'Sharon',
    lastName: 'Tanner',
    age: '58',
  },
  {
    id: '5',
    job: 'Cashier',
    email: 'Evie_Farmer6650@typill.biz',
    firstName: 'Evie',
    lastName: 'Farmer',
    age: '26',
  },
])

function extraFilter(data: RowData) {
  return data.job.includes(jobSearch.value)
}

function handleRowFilter(profiles: TableFilterProfile[]) {
  console.info(profiles)
}

function clearFilter() {
  table.value?.clearFilter()
}

function resetAgeFilter() {
  ageFilter.meta.values[0] = NaN
  ageFilter.meta.values[1] = NaN
}
</script>

<template>
  <div style="display: flex; justify-content: end; width: 1000px; margin-bottom: 10px">
    <Input
      v-model:value="jobSearch"
      sync
      clearable
      placeholder="Search Job"
      style="max-width: 200px"
    ></Input>
  </div>
  <Table
    ref="table"
    :columns="columns"
    :data="data"
    :width="1000"
    :row-height="40"
    :data-filter="extraFilter"
    @row-filter="handleRowFilter"
  >
    <TableColumn
      name="Age"
      id-key="age"
      :order="1"
      :filter="ageFilter"
    >
      <template #filter="{ filter, handleFilter }">
        <Tooltip transfer placement="bottom" trigger="click">
          <template #trigger>
            <div class="column-filter">
              <Icon :icon="Filter"></Icon>
            </div>
          </template>
          <template #default="{ toggleVisible }">
            <Space vertical>
              最小值：
              <NumberInput v-model:value="filter.meta.values[0]" sync></NumberInput>
              最大值：
              <NumberInput v-model:value="filter.meta.values[1]" sync></NumberInput>
              <div style="margin: 3px 0">
                <Button
                  text
                  size="small"
                  :disabled="
                    Number.isNaN(filter.meta.values[0]) || Number.isNaN(filter.meta.values[1])
                  "
                  @click="(handleFilter(filter.meta.values), toggleVisible(false))"
                >
                  筛选
                </Button>
                <Button
                  text
                  size="small"
                  @click="(resetAgeFilter(), handleFilter(null), toggleVisible(false))"
                >
                  重置
                </Button>
              </div>
            </Space>
          </template>
        </Tooltip>
      </template>
    </TableColumn>
  </Table>
  <Button style="margin-top: 10px" @click="clearFilter">
    清除过滤
  </Button>
</template>

<style scoped>
.column-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15px;
  margin-inline-start: 3px;
  color: var(--vxp-table-filter-color);
  cursor: pointer;
  transition: var(--vxp-transition-color);
}

.column-filter:hover {
  color: var(--vxp-table-filter-color-hover);
}
</style>

<script setup lang="ts">
import { h, reactive } from 'vue'

import { defineTableColumns } from 'vexip-ui'

const columns = reactive(
  defineTableColumns([
    { type: 'selection', fixed: true },
    {
      type: 'order',
      name: 'Order',
      fixed: true,
    },
    {
      name: 'First Name',
      key: 'firstName',
      width: 160,
    },
    {
      name: 'Last Name',
      key: 'lastName',
      width: 160,
    },
    {
      name: 'Company',
      key: 'company',
      width: 180,
    },
    {
      name: 'Job',
      key: 'job',
      width: 120,
    },
    {
      name: 'Age',
      key: 'age',
      width: 60,
      textAlign: 'center',
      fixed: 'right',
    },
    {
      name: 'Address',
      key: 'address',
      width: 200,
    },
    {
      name: 'Email',
      key: 'email',
      width: 240,
    },
    {
      name: 'Action',
      key: 'action',
      width: 120,
      textAlign: 'center',
      fixed: 'right',
      renderer: () => h('a', { href: 'javascript:void 0' }, ['Action']),
    },
  ]),
)
const data = reactive(
  Array.from({ length: 10 }, (_, index) => {
    return {
      id: index + 1,
      firstName: `First ${index}`,
      lastName: `Last ${index}`,
      company: `Company ${index}`,
      job: `Job ${index}`,
      age: 20 + index,
      email: `email${index}@vexip.ui`,
      address: `Address ${index}`,
    }
  }),
)
</script>

<template>
  <Table
    use-x-bar
    use-y-bar
    :columns="columns"
    :data="data"
    :width="1000"
    :height="260"
  ></Table>
</template>