Table

MDX table with GFM support — bordered cells, responsive text sizing, and a horizontal-scroll wrapper for tables wider than the article column.

Article Typography

Default

Wide table (scrollable)

Source

/** @jsxRuntime automatic */
/** @jsxImportSource preact */
// Story for the article `Table` component — new coverage (epic #1647, wave 6, #1662).
import { defineStory } from '@lib/styleguide/story-contract';
import type { StoryMeta } from '@lib/styleguide/story-contract';
import { Table } from './table';

const meta: StoryMeta = {
  title: 'Table',
  category: 'Article Typography',
  description:
    'MDX table with GFM support — bordered cells, responsive text sizing, and a horizontal-scroll wrapper for tables wider than the article column.',
  usage: `import { Table } from '@/components/article/table';\n\n<Table>\n  <thead>...</thead>\n  <tbody>...</tbody>\n</Table>`,
};
export default meta;

export const Default = defineStory({
  name: 'Default',
  render: () => (
    <Table>
      <thead>
        <tr>
          <th>モジュール</th>
          <th>幅 (HP)</th>
          <th>消費電流 +12V</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ADDAC120</td>
          <td>8HP</td>
          <td>50mA</td>
        </tr>
        <tr>
          <td>ADDAC121</td>
          <td>4HP</td>
          <td>30mA</td>
        </tr>
      </tbody>
    </Table>
  ),
});

// Wide tables with many columns overflow the article column on narrow
// viewports; the `overflow-x-auto` wrapper (role="region", tabIndex={0})
// keeps them scrollable instead of breaking the layout.
export const WideTable = defineStory({
  name: 'Wide table (scrollable)',
  render: () => (
    <div className="max-w-[500px]">
      <Table>
        <thead>
          <tr>
            <th>製品名</th>
            <th>幅</th>
            <th>+12V</th>
            <th>-12V</th>
            <th>5V</th>
            <th>奥行き</th>
            <th>価格</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>OXI Coral</td>
            <td>20HP</td>
            <td>120mA</td>
            <td>10mA</td>
            <td>0mA</td>
            <td>30mm</td>
            <td>¥45,000</td>
          </tr>
          <tr>
            <td>MetaModule</td>
            <td>26HP</td>
            <td>200mA</td>
            <td>20mA</td>
            <td>150mA</td>
            <td>35mm</td>
            <td>¥98,000</td>
          </tr>
        </tbody>
      </Table>
    </div>
  ),
});

Live CSS

Injected into the previews above. Table

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */