表格

表格以行列方式顯示組織化的資料集。

簡介

Joy UI Table 元件讓您可以使用純 HTML 結構在 JSX 中組裝表格。

基礎

Joy UI Table 將根據使用 <thead>、<tbody> 和 <tfoot> 元素的表格結構套用樣式。

import Table from '@mui/joy/Table';

客製化

欄寬

使用 sx 屬性來鎖定標題，並以數字或百分比形式提供寬度。

沒有明確寬度的欄位將平均展開以填滿剩餘區域。

內聯樣式

控制欄寬的另一種方法是在 <th> 元素上使用 內聯樣式

<thead>
  <tr>
    <th style={{ width: '40%' }}>Column 1</th>
    <th style={{ width: '64px' }}>Column 2</th>
  </tr>
</thead>

對齊

使用 sx 屬性以適當的 CSS 選擇器鎖定欄位，並套用 text-align 屬性。

// target cells that are not the first in their respective rows.
<Table sx={{ '& tr > *:not(:first-child)': { textAlign: 'right' } }}>

變體

Table 支援 Joy UI 的四種全域變體：plain（預設）、outlined、soft 和 solid。

尺寸

此元件提供三種尺寸：sm、md（預設）和 lg。

條紋

若要在列之間建立對比，請將 stripe 屬性與 odd 或 even 值搭配使用。

懸停

若要在滑鼠懸停在表格主體的列時反白顯示該列，請將 hoverRow 屬性設定為 true。

邊框

使用 borderAxis 屬性來控制邊框外觀。

新增自訂邊框

使用 extendTheme() 函數，根據 borderAxis 屬性自訂表格主題。

import { CssVarsProvider, extendTheme } from '@mui/joy/styles';

const theme = extendTheme({
  components: {
    JoyTable: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          ...(ownerState.borderAxis === 'header' && {
            // this example applies borders between <thead> and <tbody>
            '& thead th:not([colspan])': {
              borderBottom: '2px solid var(--TableCell-borderColor)',
            },
          }),
        });
      }
    }
  }
})

<CssVarsProvider theme={theme}>…</CssVarsProvider>

對於 TypeScript，您必須透過模組擴充新增值

// this could be any file that's included in your tsconfig.json
declare module '@mui/joy/Table' {
  interface TablePropsBorderAxisOverrides {
    header: true;
  }
}

固定標題和頁腳

將 stickyHeader 設定為 true，以在使用者捲動表格時，始終將標題固定在頂端。

將 stickyFooter 設定為 true，以始終將頁腳固定在表格底部。

標題

新增標題以總結表格內容，方法是插入 <caption> 元素作為表格的第一個子元素。

頁腳

使用 <tfoot> 將頁腳新增至表格。

列標題

將 scope="row" 設定為 <tbody> 內的 <th> 元素，以套用與欄標題相同的樣式。以下示範說明常見的使用案例：將第一欄設定為符合標題樣式。

列和欄跨度

使用 rowSpan 和 columnSpan 將儲存格跨越多列或多欄展開。

文字省略

若要截斷文字，請將 noWrap 設定為 true。標題儲存格始終會截斷文字，以保持標題的高度可預測。

CSS 變數 playground

試用 Table 元件可用的 CSS 變數，以查看設計如何變更。您可以使用這些變數，透過 sx 屬性和主題自訂元件。

搭配 Sheet 使用

import Sheet from @mui/joy/Sheet 當 Table 成為 Sheet 元件的子元件時，表格標題背景會繼承自 Sheet。

色彩反轉

啟用色彩反轉後，Table 的樣式會根據其變體進行調整。

常見範例

排序和選擇

使用表單元件，例如 Button、Select 和 Switch 來建立排序和選擇功能。

首欄和末欄固定

可摺疊列

套用全域變體

使用 theme.variants.* 將全域變體樣式套用至表格。

捲動陰影

靈感來自 Lea Verou 關於 CSS 捲動陰影 的這篇文章，陰影會在表格上捲動時出現和隱藏。

API

請參閱以下文件，以取得此處提及之元件的所有屬性和類別的完整參考。

• <Table />