Table

1行目・一列目を固定表示することにも対応させた、汎用的なTableレイアウトの作成例です。

変数でボーダースタイルを調整できるようにしておくことで、固定表示に対応できるように設計しています。

Create Component

Table(.c--table)というコンポーネントを作って利用する例を紹介していきます。

Source Code

ソースコードを手動でコピー&ペーストしてご利用ください。

Import

 import jsx from '@/components/lism/Table/index.jsx';

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>

↓

—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>

スクロール時の固定表示

[data-table-sticky]属性に以下を指定できます。

col: セル１列目を固定する
head: theadを固定する

↓

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

Header 1	Header 2	Header 3	Header 3	Header 3	Header 3
Cell 1-1	Cell 1-2 Lorem ipsum text	Cell 1-3	Cell 1-4	Cell 1-5 Lorem ipsum text	Cell 1-6
Cell 2-1	Cell 2-2	Cell 2-3 Lorem ipsum text	Cell 2-4	Cell 2-5	Cell 2-6 Lorem ipsum text
Cell 2-1	Cell 3-2	Cell 3-3	Cell 3-4 Lorem ipsum text	Cell 3-5	Cell 3-6
Cell 4-1	Cell 4-2 Lorem ipsum text	Cell 4-3	Cell 4-4	Cell 4-5 Lorem ipsum text	Cell 4-6
Cell 5-1	Cell 5-2	Cell 5-3 Lorem ipsum text	Cell 5-4	Cell 5-5	Cell 5-6 Lorem ipsum text
Cell 6-1	Cell 6-2	Cell 6-3	Cell 6-4 Lorem ipsum text	Cell 6-5	Cell 6-6

<Frame ov='auto' max-h='20rem'>
  <Table data-table-sticky='col head' thBgc='base-2' cellMinW='10rem'>
    <thead>...</thead>
    <tbody>...</tbody>
    <tfoot>...</tfoot>
  </Table>
</Frame>

<div class="l--frame -ov:auto" style="max-height:20rem">
  <table class='c--table' data-table-sticky='col head' style="--th--bgc:var(--c--base-2);--cell_minW:10rem">
    <thead>...</thead>
    <tbody>...</tbody>
    <tfoot>...</tfoot>
  </table>
</div>