import { ComponentInfo, Link, Preview, Tagline } from "@stories/components";
import { Meta, Story } from "@storybook/addon-docs";
import { TBody, TD, TFoot, TH, THead, TR, Table } from "@components/html";

<Meta
    title="Html elements/Table"
    id="html-table"
/>

# Table

<Tagline>A specialized <Link href="?path=/docs/box--default-story">box</Link> component for HTML table element.</Tagline>

<ComponentInfo
    usage={"import { Table, THead, TBody, TFoot, TH, TR, TD } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/html/src"
/>

## Usage

A table component accepts all the [table HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) and [Orbit styled component props](?path=/docs/styling--page).

<Preview>
    <Story name="example">
        <Table color="alias-tertiary" cellPadding={5}>
            <THead fontWeight={3}>
                <TR>
                    <TH textAlign="left">Company</TH>
                    <TH textAlign="left">Employees</TH>
                </TR>
            </THead>
            <TBody>
                <TR>
                    <TD>Space X</TD>
                    <TD>More than 10 000</TD>
                </TR>
                <TR>
                    <TD>Blue Origin</TD>
                    <TD>3 500</TD>
                </TR>
                <TR color="accent-6">
                    <TD>Virgin Galactic</TD>
                    <TD>823</TD>
                </TR>
            </TBody>
            <TFoot>
            </TFoot>
        </Table>
    </Story>
</Preview>
