コンテンツにスキップ
Lism UI

Table

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

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

Import

Copy 
import { Lism } from '@lism-ui/core';
import getMaybeCssVar from '@lism-ui/core/lib/getMaybeCssVar';
import './style.scss';
 
function getTableProps({ thBgc, tdBgc, thC, tdC, bdwX, bdwY, style = {}, ...props }) {
	if (bdwX) style['--bdwX'] = bdwX;
	if (bdwY) style['--bdwY'] = bdwY;
	if (thC) style['--th-c'] = getMaybeCssVar(thC, 'color');
	if (tdC) style['--td-c'] = getMaybeCssVar(tdC, 'color');
	if (thBgc) style['--th-bgc'] = getMaybeCssVar(thBgc, 'color');
	if (tdBgc) style['--td-bgc'] = getMaybeCssVar(tdBgc, 'color');
 
	props.style = style;
 
	return props;
}
 
export default function Table({ children, ...props }) {
	return (
		<Lism tag='table' lismClass='c--table' {...getTableProps(props)}>
			{children}
		</Lism>
	);
}
view raw index.jsx delivered with ❤ by emgithub
ソースコードを手動でコピー&ペーストしてご利用ください。 
 import Table from '@/components/lism/Table/index.jsx';

Usage

↓
Preview
Header 1Header 2Header 3Header 4
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4
Footer 1Footer 2Footer 3Footer 4
<Table>
  <caption>Caption</caption>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>...</tfoot>
</Table>
↓
—bdwXで左右のボーダーをなくし、thのカラーリングを指定する例
Header 1Header 2Header 3Header 4
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4
Footer 1Footer 2Footer 3Footer 4
<Table thBgc='base-2' bdwX='1px'>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>...</tfoot>
</Table>

スクロール時の固定表示

以下のような2つのバリエーションクラスをこの例では定義しています。

  • セル１列目を固定するc--table--fix1stCell
  • theadを固定するc--table--fixHead
↓
scroll時にtheadと、1列目のセルを固定する例
Header 1Header 2Header 3Header 3Header 3Header 3
Cell 1Cell 2Cell 3Cell 4Cell 2Cell 3
Cell 1Cell 2Cell 3
text		Cell 4Cell 2Cell 3
text
Cell 2…Cell 4Cell 2…
Cell 1Cell 2Cell 3
text		Cell 4Cell 2Cell 3
text
Cell 1Cell 2…Cell 4Cell 2…
Cell 1Cell 2…Cell 4Cell 2Cell 3
text
<Frame ov='auto' maxH='20rem'>
  <Table variant='fix1stCell,fixHead' thBgc='base-2' style={{'--cell-minIs':'10rem','--bdwwX': '1px'}}>
    <thead>...</thead>
    <tbody>...</tbody>
    <tfoot>...</tfoot>
  </Table>
</Frame>