###### tags: `ui`
# Table

collapsing : 欄位寬度和內容相符
`<Table collapsing>`

import { Table } from 'semantic-ui-react';

<Table celled>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>Header</Table.HeaderCell>
        <Table.HeaderCell>Header</Table.HeaderCell>
        <Table.HeaderCell>Header</Table.HeaderCell>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
    </Table.Body>
</Table>

## 顯示陣列資料

### 自動式
用一個物件設定欄位 key 和要顯示的中文欄位標題
在 Table 中,取得此物件資料做顯示

const obj = {
    dateField: '日期',
    itemName: '項目',
    amt: '支出',
    qty: '股數',
  };


const columns = Object.keys(obj);


<Table celled unstackable>
    <Table.Header>
      <Table.Row>
        {columns.map((k, index) => {
          return <Table.HeaderCell>{obj[k]}</Table.HeaderCell>;
        })}
      </Table.Row>
    </Table.Header>

    <Table.Body>
      {rows.map((row) => {
        return (
          <Table.Row key={row.id}>
            {columns.map((col) => {
              return <Table.Cell>{row[col]}</Table.Cell>;
            })}
          </Table.Row>
        );
      })}
    </Table.Body>
</Table>

### 固定式

import React, { useEffect, useState } from 'react';
import { db } from '../../utils/firebase';
import TableView from './components/TableView';

export default function index() {
  const [rows, setRows] = useState([]);
  // 文件集合名稱
  const colName = 'stocks';

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const snapshot = await db.collection(colName).limit(10).get();
    const data = snapshot.docs.map((doc) => {
      return { ...doc.data(), id: doc.id };
    });
    console.log(data);
    setRows(data);
  };

  return (
    <>
      <TableView rows={rows} />
    </>
  );
}

import React from 'react';
import { Table } from 'semantic-ui-react';

export default function TableView({ rows }) {
  return (
    <div>
      <Table celled unstackable>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell width={2}>欄位一</Table.HeaderCell>
            <Table.HeaderCell width={2}>欄位二</Table.HeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {rows.map((row) => {
            return (
              <Table.Row key={row.id}>
                <Table.Cell>{row.name}</Table.Cell>
                <Table.Cell>{row.qty}</Table.Cell>
              </Table.Row>
            );
          })}
        </Table.Body>
      </Table>
    </div>
  );
}

## 排序
顯示箭頭

<Table sortable>
    <Table.HeaderCell sorted="ascending || descending">