Table 表格组件 #

import {
  Table,
  Thead,
  Tbody,
  Tfoot,
  Tr,
  Th,
  Td,
  TableCaption,
  TableContainer,
} from '@chakra-ui/react'

function Example() {
  return (
    <TableContainer>
      <Table variant="simple">
        <TableCaption>用户数据统计</TableCaption>
        <Thead>
          <Tr>
            <Th>姓名</Th>
            <Th>年龄</Th>
            <Th isNumeric>薪资</Th>
          </Tr>
        </Thead>
        <Tbody>
          <Tr>
            <Td>张三</Td>
            <Td>25</Td>
            <Td isNumeric>¥10,000</Td>
          </Tr>
          <Tr>
            <Td>李四</Td>
            <Td>30</Td>
            <Td isNumeric>¥15,000</Td>
          </Tr>
        </Tbody>
        <Tfoot>
          <Tr>
            <Th>总计</Th>
            <Th>2人</Th>
            <Th isNumeric>¥25,000</Th>
          </Tr>
        </Tfoot>
      </Table>
    </TableContainer>
  )
}

<Table variant="simple">简单表格</Table>
<Table variant="striped">条纹表格</Table>
<Table variant="unstyled">无样式表格</Table>

<Table size="sm">小表格</Table>
<Table size="md">中等表格（默认）</Table>
<Table size="lg">大表格</Table>

<Table colorScheme="blue">蓝色表格</Table>
<Table colorScheme="green">绿色表格</Table>
<Table colorScheme="red">红色表格</Table>

<Table variant="striped" colorScheme="gray">
  <Thead>
    <Tr>
      <Th>姓名</Th>
      <Th>邮箱</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>张三</Td>
      <Td>zhangsan@example.com</Td>
    </Tr>
    <Tr>
      <Td>李四</Td>
      <Td>lisi@example.com</Td>
    </Tr>
  </Tbody>
</Table>

<TableContainer maxH="300px" overflowY="auto">
  <Table>
    {/* 表格内容 */}
  </Table>
</TableContainer>

function UserTable({ users }) {
  return (
    <TableContainer>
      <Table variant="simple">
        <Thead>
          <Tr>
            <Th>用户</Th>
            <Th>邮箱</Th>
            <Th>角色</Th>
            <Th>状态</Th>
            <Th>操作</Th>
          </Tr>
        </Thead>
        <Tbody>
          {users.map((user) => (
            <Tr key={user.id}>
              <Td>
                <HStack>
                  <Avatar size="sm" src={user.avatar} />
                  <Text>{user.name}</Text>
                </HStack>
              </Td>
              <Td>{user.email}</Td>
              <Td>
                <Badge colorScheme={user.role === 'admin' ? 'purple' : 'gray'}>
                  {user.role}
                </Badge>
              </Td>
              <Td>
                <Badge colorScheme={user.active ? 'green' : 'red'}>
                  {user.active ? '活跃' : '禁用'}
                </Badge>
              </Td>
              <Td>
                <HStack spacing={2}>
                  <Button size="sm" colorScheme="blue">编辑</Button>
                  <Button size="sm" colorScheme="red" variant="outline">删除</Button>
                </HStack>
              </Td>
            </Tr>
          ))}
        </Tbody>
      </Table>
    </TableContainer>
  )
}

function SortableTable({ data }) {
  const [sortField, setSortField] = useState('name')
  const [sortOrder, setSortOrder] = useState('asc')

  const sortedData = [...data].sort((a, b) => {
    if (sortOrder === 'asc') {
      return a[sortField] > b[sortField] ? 1 : -1
    }
    return a[sortField] < b[sortField] ? 1 : -1
  })

  const handleSort = (field) => {
    if (sortField === field) {
      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
    } else {
      setSortField(field)
      setSortOrder('asc')
    }
  }

  return (
    <TableContainer>
      <Table>
        <Thead>
          <Tr>
            <Th cursor="pointer" onClick={() => handleSort('name')}>
              <HStack>
                <Text>姓名</Text>
                {sortField === 'name' && (
                  <Icon as={sortOrder === 'asc' ? ChevronUpIcon : ChevronDownIcon} />
                )}
              </HStack>
            </Th>
            <Th cursor="pointer" onClick={() => handleSort('age')} isNumeric>
              <HStack justify="flex-end">
                <Text>年龄</Text>
                {sortField === 'age' && (
                  <Icon as={sortOrder === 'asc' ? ChevronUpIcon : ChevronDownIcon} />
                )}
              </HStack>
            </Th>
          </Tr>
        </Thead>
        <Tbody>
          {sortedData.map((item) => (
            <Tr key={item.id}>
              <Td>{item.name}</Td>
              <Td isNumeric>{item.age}</Td>
            </Tr>
          ))}
        </Tbody>
      </Table>
    </TableContainer>
  )
}