Table

標準的なスタイルを適用した表を呼び出すコンポーネントです。

次のような変数でボーダースタイルを調整できるようになっています。

:where(.l--table) {
  --bdwY: 1px;
  --bdwX: 1px;
  --bds: solid;
  --bdc: var(--c--divider);
  --thead-bdbe: solid 2px;
  --tfoot-bdbs: solid 2px;
}

また、後述するオプトインのバリエーション（セルの固定表示）を考慮した設計になっています

Import

import { Table } from '@lism-ui/core';

Usage

↓

Preview

Header 1	Header 2	Header 3	Header 4
Cell 1	Cell 2	Cell 3	Cell 4
Cell 2-1	Cell 2-2	Cell 2-3	Cell 2-4
Cell 3-1	Cell 3-2	Cell 3-3	Cell 3-4
Footer 1	Footer 2	Footer 3	Footer 4

<Table>
  <caption>Caption</caption>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>...</tfoot>
</Table>

.l--tableは、次のようなCSSが適用されており、いくつかの変数でプロパティが管理されています。
これは、スクロール時に thead などを固定できるようにすることをあらかじめ考慮した設計になっています。

↓

—bdwXで左右のボーダーをなくし、thのカラーリングを指定する例

Header 1	Header 2	Header 3	Header 4
Cell 1	Cell 2	Cell 3	Cell 4
Cell 2-1	Cell 2-2	Cell 2-3	Cell 2-4
Cell 3-1	Cell 3-2	Cell 3-3	Cell 3-4
Footer 1	Footer 2	Footer 3	Footer 4

<Table thBgc='base-2' bdwX='1px'>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>...</tfoot>
</Table>

Opt-in

以下のような2つのバリエーションクラスを用意する例を紹介します。

セル１列目を固定するl--table--fixCol1
theadを固定するl--table--fixHead

↓

scroll時にtheadと、1列目のセルを固定する例

Header 1	Header 2	Header 3	Header 3	Header 3	Header 3
Cell 1	Cell 2	Cell 3	Cell 4	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3 text	Cell 4	Cell 2	Cell 3 text
Cell 1	Cell 2	…	Cell 4	Cell 2	…
Cell 1	Cell 2	Cell 3 text	Cell 4	Cell 2	Cell 3 text
Cell 1	Cell 2	…	Cell 4	Cell 2	…
Cell 1	Cell 2	…	Cell 4	Cell 2	Cell 3 text

.l--table--fixCol1 {
  // .-nofix: rowspanの対応用クラス.
  tr > :first-child:not(.-nofix) {
    position: sticky;
    left: 0;
    z-index: 1; // 他のセルが relative だと上に来てしまうので、 z-index を少し上げておく

    // スクロール時にborderが表示されない問題への対処
    border-inline: none;
    &::before {
      content: '';
      position: absolute;
      inset: 0 calc(var(--bdwX) * -1) 0 0;
      border-block: none;
    }
  }
}

.l--table--fixHead {
  > thead {
    position: sticky;
    top: 0;
    z-index: 2; // fixCol1 + 1

    // スクロール時にborderが表示されない問題への対処
    border-block: none;
  }
  > thead::before {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0 0 calc(var(--bdwY) * -0.5) 0;
    border-block: var(--bdwY) var(--bds) var(--bdc);
    border-block-end: var(--thead-bdbe);
  }
}

<Frame ov='auto' maxH='20rem'>
  <Table variant='fixCol1,fixHead' thBgc='base-2' style={{'--cell-minIs':'10rem','--bdwwX': '1px'}}>
    <thead>...</thead>
    <tbody>...</tbody>
    <tfoot>...</tfoot>
  </Table>
</Frame>

<div class="l--frame -ov:a" style="max-height:20rem">
  <table class='l--table l--table--fixCol1 l--table--fixHead' style="--cell-minIs:10rem;--bdwwX:1px;--th-bgc:var(--c--base-2)">
    <thead>...</thead>
    <tbody>...</tbody>
    <tfoot>...</tfoot>
  </table>
</div>