export const title = "Table components"
export const description = "Free and open-source React table components built for modern applications and websites. These tables are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/application/table",
    rac: "https://react-spectrum.adobe.com/react-aria/Table.html"
}

import * as Demos from "@/components/application/table/table.demo.tsx";

<PreviewAndCode title="Table example">
    <ResizablePreview id="preview" className=" rounded-2xl flex gap-3 flex-col min-h-[320px]  bg-primary">
        <Demos.Table01DividerLine />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[800px]" components={[
            { name: "table-demo.tsx", path: "table/Table01DividerLine" }, 
            { name: "team-members.json", path: "public-components/components/application/table/team-members.json" }
        ]} />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this table component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add table
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/table" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the table components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Sizes

Our table components come in 2 sizes: `sm` and `md`. You can easily switch between them by changing the `size` prop either on the `TableCard.Root` or on the `Table` component.

```tsx
// [!code word:size="sm"]
<TableCard.Root size="sm">
    {/* rest of the table components */}
</TableCard.Root>
```

```tsx
// [!code word:size="sm"]
<Table size="sm">
    {/* rest of the table components */}
</Table>
```

### Table small size example {{ tocOnly:true}}

<PreviewAndCode title="Table small size example">
    <ResizablePreview id="preview" className=" rounded-2xl flex gap-3 flex-col min-h-[320px]  bg-primary">
        <Demos.Table01DividerLineSm />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[800px]" components={[
            { name: "table-demo.tsx", path: "table/Table01DividerLineSm" }, 
            { name: "team-members.json", path: "public-components/components/application/table/team-members.json" }
        ]} />
    </TabPanel>
</PreviewAndCode>

## Table examples

Below are examples and variations of this table component:

### Divider line 01 {{ tocOnly:true}}

<PreviewAndCode title="Divider line 01">
    <ResizablePreview id="preview" className=" rounded-2xl flex gap-3 flex-col min-h-[320px]  bg-primary">
        <Demos.Table01DividerLine />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[800px]" components={[
            { name: "table-demo.tsx", path: "table/Table01DividerLine" }, 
            { name: "team-members.json", path: "public-components/components/application/table/team-members.json" }
        ]} />
    </TabPanel>
</PreviewAndCode>

### Alternating fills 01 {{ tocOnly:true}}

<PreviewAndCode title="Alternating fills 01">
    <ResizablePreview id="preview" className=" rounded-2xl flex gap-3 flex-col min-h-[320px]  bg-primary">
        <Demos.Table01AlternatingFills />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[800px]" components={[
            { name: "table-demo.tsx", path: "table/Table01AlternatingFills" }, 
            { name: "customers.json", path: "public-components/components/application/table/customers.json" }
        ]} />
    </TabPanel>
</PreviewAndCode>

### Divider line 02 {{ tocOnly:true}}

<PreviewAndCode title="Divider line 02">
    <ResizablePreview id="preview" className=" rounded-2xl flex gap-3 flex-col min-h-[320px]  bg-primary">
        <Demos.Table02DividerLine />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[800px]" components={[
            { name: "table-demo.tsx", path: "table/Table02DividerLine" }, 
            { name: "customers.json", path: "public-components/components/application/table/customers.json" }
        ]} />
    </TabPanel>
</PreviewAndCode>

### Alternating fills 02 {{ tocOnly:true}}

<PreviewAndCode title="Alternating fills 02">
    <ResizablePreview id="preview" className=" rounded-2xl flex gap-3 flex-col min-h-[320px]  bg-primary">
        <Demos.Table02AlternatingFills />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[800px]" components={[
            { name: "table-demo.tsx", path: "table/Table02AlternatingFills" }, 
            { name: "invoices.json", path: "public-components/components/application/table/invoices.json" }
        ]} />
    </TabPanel>
</PreviewAndCode>

### Divider line 03 {{ tocOnly:true}}

<PreviewAndCode title="Divider line 03">
    <ResizablePreview id="preview" className=" rounded-2xl flex gap-3 flex-col min-h-[320px]  bg-primary">
        <Demos.Table03DividerLine />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[800px]" components={[
            { name: "table-demo.tsx", path: "table/Table03DividerLine" }, 
            { name: "invoices.json", path: "public-components/components/application/table/invoices.json" }
        ]} />
    </TabPanel>
</PreviewAndCode>

### Alternating fills 03 {{ tocOnly:true}}

<PreviewAndCode title="Alternating fills 03">
    <ResizablePreview id="preview" className=" rounded-2xl flex gap-3 flex-col min-h-[320px]  bg-primary">
        <Demos.Table03AlternatingFills />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[800px]" components={[
            { name: "table-demo.tsx", path: "table/Table03AlternatingFills" }, 
            { name: "invoices.json", path: "public-components/components/application/table/invoices.json" }
        ]} />
    </TabPanel>
</PreviewAndCode>

### Divider line 04 {{ tocOnly:true}}

<PreviewAndCode title="Divider line 04">
    <ResizablePreview id="preview" className=" rounded-2xl flex gap-3 flex-col min-h-[320px]  bg-primary">
        <Demos.Table04DividerLine />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[800px]" components={[
            { name: "table-demo.tsx", path: "table/Table04DividerLine" }, 
            { name: "uploaded-files.json", path: "public-components/components/application/table/uploaded-files.json" }
        ]} />
    </TabPanel>
</PreviewAndCode>

### Alternating fills 04 {{ tocOnly:true}}

<PreviewAndCode title="Alternating fills 04">
    <ResizablePreview id="preview" className=" rounded-2xl flex gap-3 flex-col min-h-[320px]  bg-primary">
        <Demos.Table04AlternatingFills />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[800px]" components={[
            { name: "table-demo.tsx", path: "table/Table04AlternatingFills" }, 
            { name: "uploaded-files.json", path: "public-components/components/application/table/uploaded-files.json" }
        ]} />
    </TabPanel>
</PreviewAndCode>

### No vendors found {{ tocOnly:true}}

<PreviewAndCode title="No vendors found">
    <ResizablePreview id="preview" className=" rounded-2xl flex gap-3 flex-col min-h-[320px]  bg-primary">
        <Demos.TableNoVendorsFound />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[800px]" component="table/TableNoVendorsFound" />
    </TabPanel>
</PreviewAndCode>


### Something went wrong {{ tocOnly:true}}

<PreviewAndCode title="Something went wrong">
    <ResizablePreview id="preview" className=" rounded-2xl flex gap-3 flex-col min-h-[320px]  bg-primary">
        <Demos.TableSomethingWentWrong />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[800px]" component="table/TableSomethingWentWrong" />
    </TabPanel>
</PreviewAndCode>

### No users found {{ tocOnly:true}}

<PreviewAndCode title="No users found">
    <ResizablePreview id="preview" className=" rounded-2xl flex gap-3 flex-col min-h-[320px]  bg-primary">
        <Demos.TableNoUsersFound />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[800px]" component="table/TableNoUsersFound" />
    </TabPanel>
</PreviewAndCode>

### Add first integration {{ tocOnly:true}}

<PreviewAndCode title="Add first integration">
    <ResizablePreview id="preview" className=" rounded-2xl flex gap-3 flex-col min-h-[320px]  bg-primary">
        <Demos.TableAddFirstIntegration />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[800px]" component="table/TableAddFirstIntegration" />
    </TabPanel>
</PreviewAndCode>

### Invite first user {{ tocOnly:true}}

<PreviewAndCode title="Invite first user">
    <ResizablePreview id="preview" className=" rounded-2xl flex gap-3 flex-col min-h-[320px]  bg-primary">
        <Demos.TableInviteFirstUser />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[800px]" component="table/TableInviteFirstUser" />
    </TabPanel>
</PreviewAndCode>

### Offline state {{ tocOnly:true}}

<PreviewAndCode title="Offline state">
    <ResizablePreview id="preview" className=" rounded-2xl flex gap-3 flex-col min-h-[320px]  bg-primary">
        <Demos.TableOffline />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[800px]" component="table/TableOffline" />
    </TabPanel>
</PreviewAndCode>