テーマカラーの定義を更新しました

最新のCSSを確認

Table

Tableは、データを行と列で構造化して表示する際に使用されるコンポーネントです。
データを比較・分析しやすくするために設計されており、ヘッダー、行、列などの要素を含みます。

プロパティ

Tableは、以下のプロパティをサポートしています。

TableHead.TableHeadProps

名前 型 デフォルト値 説明
size boolean medium thのサイズを指定します。small, medium, large のいずれかを選択できます。

TableData.TableDataProps

名前 型 デフォルト値 説明
size boolean medium tdのサイズを指定します。small, medium, large のいずれかを選択できます。

インストールの手順

以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。
パスは実際のプロジェクトの構成にあわせて更新します。

atoms/Table.svelte 
        <!--
@component
## 概要
- tableタグと同様に表形式のデータを表示するための汎用的なテーブルコンポーネントです

## 機能
- tableタグと同様に行・列で構造化されたデータを表示可能です
- 任意のテーブル要素（`<thead>`, `<tbody>`, `<tr>` など）を自由に記述可能です

## Usage
```svelte
  <Table>
    <tr>などを自由に記載
  </Table>
```
-->

<script module lang="ts">
  import type { Snippet } from 'svelte';
  import type { ClassValue, HTMLTableAttributes } from 'svelte/elements';

  export interface TableProps extends HTMLTableAttributes {
    /** クラス */
    class?: ClassValue;
    children?: Snippet<[]>;
    /** 内部で使用するため指定できません */
    'data-rabee-ui'?: never;
  }
</script>

<script lang="ts">
  let { class: className, children, ...tableAttributes }: TableProps = $props();
</script>

<table class={className} {...tableAttributes} data-rabee-ui="table">
  {@render children?.()}
</table>

atoms/TableHead.svelte 
        <!--
@component
## 概要
- thタグのように、テーブルのヘッダーセルを表す汎用的なコンポーネントです

## 機能
- thタグとして動作し、テーブルのヘッダーセルとして使用できます

## Props
- size: セルのサイズを指定できます

## Usage
```svelte
<Table>
  <tbody>
    <tr>
      <TableHead size="s">テーブルデータ</TableHead>
    </tr>
  </tbody>
</Table>
```
-->
<script module lang="ts">
  import type { Snippet } from 'svelte';
  import type { ClassValue, HTMLThAttributes } from 'svelte/elements';
  import { cva, type VariantProps } from 'class-variance-authority';

  export const tableHeadVariants = cva('px-4 py-1 text-left font-medium text-muted-foreground text-sm/tight transition-colors', {
    variants: {
      /** セルのサイズ */
      size: {
        small: ['h-12'],
        medium: ['h-18'],
        large: ['h-24'],
      },
    },
    defaultVariants: {
      size: 'medium',
    },
  });

  export type TableVariants = VariantProps<typeof tableHeadVariants>;

  export interface TableHeadProps extends TableVariants, HTMLThAttributes {
    /** クラス */
    class?: ClassValue;
    children?: Snippet<[]>;
    /** 内部で使用するため指定できません */
    'data-rabee-ui'?: never;
  }
</script>

<script lang="ts">
  let { size, children, class: className, ...thAttributes }: TableHeadProps = $props();

  let thVariantClass = $derived(tableHeadVariants({ size, class: className }));
</script>

<th class={thVariantClass} {...thAttributes} data-rabee-ui="table-head">
  {@render children?.()}
</th>

atoms/TableData.svelte 
        <!--
@component
## 概要
- tdタグのようにテーブルのセルを表す汎用的なコンポーネントです

## 機能
- tdタグのように機能し、内容をスロットで柔軟に挿入できます
- セルのサイズを指定したり複数列にまたがるセルを指定するためのPropsが追加されています（詳細はPropsセクションを参照）

## Props
- size: セルのサイズを指定できます

## Usage
```svelte
<Table>
  <tbody>
    <tr>
      <TableData size="s">テーブルデータ</TableData>
    </tr>
  </tbody>
</Table>
```
-->

<script module lang="ts">
  import type { Snippet } from 'svelte';
  import type { ClassValue, HTMLTdAttributes } from 'svelte/elements';
  import { cva, type VariantProps } from 'class-variance-authority';

  export const tableDataVariants = cva('px-4 py-1 text-foreground text-sm/normal transition-colors', {
    variants: {
      /** セルのサイズ */
      size: {
        small: ['h-12'],
        medium: ['h-18'],
        large: ['h-24'],
      },
    },
    defaultVariants: {
      size: 'medium',
    },
  });

  export type TableDataVariants = VariantProps<typeof tableDataVariants>;

  export interface TableDataProps extends TableDataVariants, HTMLTdAttributes {
    /** クラス */
    class?: ClassValue;
    children?: Snippet<[]>;
    /** 内部で使用するため指定できません */
    'data-rabee-ui'?: never;
  }
</script>

<script lang="ts">
  let { size, class: className, children, ...tdAttributes }: TableDataProps = $props();

  let tdVariantClass = $derived(tableDataVariants({ size, class: className }));
</script>

<td class={tdVariantClass} {...tdAttributes} data-rabee-ui="table-data">
  {@render children?.()}
</td>

使い方

サンプル

Default

特に操作が行われていない、デフォルトの状態です。

UseComponent

セル内にボタンやアイコンなどの他のコンポーネントを配置して、よりリッチなテーブルを作成することも可能です。