Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(Table): added footer and stories #91

Merged
merged 1 commit into from Apr 15, 2022
Merged

chore(Table): added footer and stories #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
267 changes: 266 additions & 1 deletion src/Table/Table.stories.tsx
View file
Open in desktop
Expand Up @@ -2,13 +2,18 @@ import React from 'react'
import { Story, Meta } from '@storybook/react'

import Table, { TableProps } from '.'
import Checkbox from '../Checkbox'
import Avatar from '../Avatar'
import Mask from '../Mask'
import Badge from '../Badge'
import Button from '../Button'

export default {
title: 'Data Display/Table',
component: Table,
} as Meta

export const Default: Story<TableProps> = (args) => {
const Template: Story<TableProps> = (args) => {
return (
<Table {...args}>
<Table.Head>
Expand Down Expand Up @@ -44,4 +49,264 @@ export const Default: Story<TableProps> = (args) => {
)
}

export const Default = Template.bind({})
Default.args = {}

export const Zebra = Template.bind({})
Zebra.args = {
zebra: true
}

export const Hover: Story<TableProps> = (args) => {
return (
<Table {...args}>
<Table.Head>
<span />
<span>Name</span>
<span>Job</span>
<span>Favorite Color</span>
</Table.Head>

<Table.Body>
<Table.Row hover>
<span>1</span>
<span>Cy Ganderton</span>
<span>Quality Control Specialist</span>
<span>Blue</span>
</Table.Row>

<Table.Row hover>
<span>2</span>
<span>Hart Hagerty</span>
<span>Desktop Support Technician</span>
<span>Purple</span>
</Table.Row>

<Table.Row hover>
<span>3</span>
<span>Brice Swyre</span>
<span>Tax Accountant</span>
<span>Red</span>
</Table.Row>
</Table.Body>
</Table>
)
}
Hover.args = {}

export const WithVisualElements: Story<TableProps> = (args) => {
return (
<Table {...args} className="rounded-box">
<Table.Head>
<Checkbox />
<span>Name</span>
<span>Job</span>
<span>Favorite Color</span>
</Table.Head>

<Table.Body>
<Table.Row>
<Checkbox />
<div className="flex items-center space-x-3">
<Mask variant="squircle" src="http://daisyui.com/tailwind-css-component-profile-2@56w.png" />
<div>
<div className="font-bold">Hart Hagerty</div>
<div className="text-sm opacity-50">United States</div>
</div>
</div>
<div>
Zemlak, Daniel and Leannon
<br />
<Badge color="ghost" size="sm">Desktop Support Technician</Badge>
</div>
<div>Purple</div>
<Button color="ghost" size="xs">details</Button>
</Table.Row>

<Table.Row>
<Checkbox />
<div className="flex items-center space-x-3">
<Mask variant="squircle" src="http://daisyui.com/tailwind-css-component-profile-3@56w.png" />
<div>
<div className="font-bold">Brice Swyre</div>
<div className="text-sm opacity-50">China</div>
</div>
</div>
<div>
Carrol Group
<br />
<Badge color="ghost" size="sm">Tax Accountant</Badge>
</div>
<div>Red</div>
<Button color="ghost" size="xs">details</Button>
</Table.Row>

<Table.Row>
<Checkbox />
<div className="flex items-center space-x-3">
<Mask variant="squircle" src="http://daisyui.com/tailwind-css-component-profile-4@56w.png" />
<div>
<div className="font-bold">Marjy Ferencz</div>
<div className="text-sm opacity-50">Russia</div>
</div>
</div>
<div>
Rowe-Schoen
<br />
<Badge color="ghost" size="sm">Office Assistant I</Badge>
</div>
<div>Crimson</div>
<Button color="ghost" size="xs">details</Button>
</Table.Row>

<Table.Row>
<Checkbox />
<div className="flex items-center space-x-3">
<Mask variant="squircle" src="http://daisyui.com/tailwind-css-component-profile-5@56w.png" />
<div>
<div className="font-bold">Yancy Tear</div>
<div className="text-sm opacity-50">Brazil</div>
</div>
</div>
<div>
Wyman-Ledner
<br />
<Badge color="ghost" size="sm">Community Outreach Specialist</Badge>
</div>
<div>Indigo</div>
<Button color="ghost" size="xs">details</Button>
</Table.Row>
</Table.Body>

<Table.Footer>
<span>&nbsp;</span>
<span>Name</span>
<span>Job</span>
<span>Favorite Color</span>
<span>&nbsp;</span>
</Table.Footer>
</Table>
)
}
WithVisualElements.args = {}

export const Compact: Story<TableProps> = (args) => {
return (
<Table {...args}>
<Table.Head>
<span />
<span>Name</span>
<span>Job</span>
<span>Company</span>
<span>Location</span>
<span>Last Login</span>
<span>Favorite Color</span>
</Table.Head>

<Table.Body>
<Table.Row>
<span>1</span>
<span>Cy Ganderton</span>
<span>Quality Control Specialist</span>
<span>Littel, Schaden and Vandervort</span>
<span>Canada</span>
<span>12/16/2020</span>
<span>Blue</span>
</Table.Row>

<Table.Row>
<span>2</span>
<span>Hart Hagerty</span>
<span>Desktop Support Technician</span>
<span>Zemlak, Daniel and Leannon</span>
<span>United States</span>
<span>12/5/2020</span>
<span>Purple</span>
</Table.Row>

<Table.Row>
<span>3</span>
<span>Brice Swyre</span>
<span>Tax Accountant</span>
<span>Carroll Group</span>
<span>China</span>
<span>8/15/2020</span>
<span>Red</span>
</Table.Row>

<Table.Row>
<span>4</span>
<span>Marjy Ferencz</span>
<span>Office Assistant I</span>
<span>Rowe-Schoen</span>
<span>Russia</span>
<span>3/25/2021</span>
<span>Crimson</span>
</Table.Row>

<Table.Row>
<span>5</span>
<span>Yancy Tear</span>
<span>Community Outreach Specialist</span>
<span>Wyman-Ledner</span>
<span>Brazil</span>
<span>5/22/2020</span>
<span>Indigo</span>
</Table.Row>

<Table.Row>
<span>6</span>
<span>Irma Vasilik</span>
<span>Editor</span>
<span>Wiza, Bins and Emard</span>
<span>Venezuela</span>
<span>12/8/2020</span>
<span>Purple</span>
</Table.Row>

<Table.Row>
<span>7</span>
<span>Meghann Durtnal</span>
<span>Staff Accountant IV</span>
<span>Schuster-Schimmel</span>
<span>Philippines</span>
<span>2/17/2021</span>
<span>Yellow</span>
</Table.Row>

<Table.Row>
<span>8</span>
<span>Sammy Seston</span>
<span>Accountant I</span>
<span>O'Hara, Welch and Keebler</span>
<span>Indonesia</span>
<span>5/23/2020</span>
<span>Crimson</span>
</Table.Row>

<Table.Row>
<span>9</span>
<span>Lesya Tinham</span>
<span>Safety Technician IV</span>
<span>Turner-Kuhlman</span>
<span>Philippines</span>
<span>2/21/2021</span>
<span>Maroon</span>
</Table.Row>

<Table.Row>
<span>10</span>
<span>Zaneta Tewkesbury</span>
<span>VP Marketing</span>
<span>Sauer LLC</span>
<span>Chad</span>
<span>6/23/2020</span>
<span>Green</span>
</Table.Row>
</Table.Body>
</Table>
)
}
Compact.args = {
compact: true
}
2 changes: 2 additions & 0 deletions src/Table/Table.tsx
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ import { IComponentBaseProps } from '../types'
import TableHead from './TableHead'
import TableBody from './TableBody'
import TableRow from './TableRow'
import TableFooter from './TableFooter'

export type TableProps = React.TableHTMLAttributes<HTMLTableElement> &
IComponentBaseProps & {
Expand Down Expand Up @@ -40,4 +41,5 @@ export default Object.assign(Table, {
Head: TableHead,
Body: TableBody,
Row: TableRow,
Footer: TableFooter,
})
25 changes: 25 additions & 0 deletions src/Table/TableFooter.tsx
View file
Open in desktop
@@ -0,0 +1,25 @@
import React, { ReactElement } from 'react'

import { IComponentBaseProps } from '../types'

export type TableFooterProps = React.TableHTMLAttributes<HTMLTableSectionElement> &
IComponentBaseProps & {
children?: ReactElement[]
}

const TableFooter = React.forwardRef<HTMLTableSectionElement, TableFooterProps>(
({ children, ...props }, ref): JSX.Element => {

return (
<tfoot {...props} ref={ref}>
<tr>
{children?.map((child) => {
return <th>{child}</th>
})}
</tr>
</tfoot>
)
}
)

export default TableFooter