-
-
Notifications
You must be signed in to change notification settings - Fork 35.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: implement basic functionality of table component
- Loading branch information
1 parent
10d626d
commit b6bd15b
Showing
6 changed files
with
188 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
|
||
export { Table } from './table'; | ||
export type { TableProps } from './types'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,87 @@ | ||
import React from 'react'; | ||
import { Story } from '@storybook/react'; | ||
import { Table, TableProps } from '.'; | ||
|
||
const exampleTable = ( | ||
<> | ||
<thead> | ||
<tr> | ||
<th>#</th> | ||
<th>First Name</th> | ||
<th>Last Name</th> | ||
<th>Username</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<td>1</td> | ||
<td>Mark</td> | ||
<td>Otto</td> | ||
<td>@mdo</td> | ||
</tr> | ||
<tr> | ||
<td>2</td> | ||
<td>John</td> | ||
<td>Loos</td> | ||
<td>@mlos</td> | ||
</tr> | ||
<tr> | ||
<td>3</td> | ||
<td>Joe</td> | ||
<td>Kot</td> | ||
<td>@mko</td> | ||
</tr> | ||
</tbody> | ||
</> | ||
); | ||
|
||
const story = { | ||
title: 'Example/Table', | ||
component: Table, | ||
parameters: { | ||
controls: { | ||
include: ['variant', 'size', 'bordered', 'borderless', 'hover', 'striped'] | ||
} | ||
}, | ||
argTypes: { | ||
variant: { | ||
options: ['light', 'dark'] | ||
}, | ||
bordered: { | ||
options: [true, false], | ||
control: { type: 'radio' } | ||
}, | ||
striped: { | ||
options: [true, false], | ||
control: { type: 'radio' } | ||
}, | ||
hover: { | ||
options: [true, false], | ||
control: { type: 'radio' } | ||
}, | ||
borderless: { | ||
options: [true, false], | ||
control: { type: 'radio'}, | ||
// Used to avoid conflict with borders | ||
if: {arg: 'bordered', truthy: false} | ||
}, | ||
size: { | ||
options: ['small', 'medium', 'large'] | ||
} | ||
|
||
} | ||
|
||
}; | ||
|
||
const Template: Story<TableProps> = args => ( | ||
<Table {...args}>{exampleTable}</Table> | ||
); | ||
export const Default = Template.bind({}); | ||
Default.args = { | ||
// default props go here | ||
bordered: true, | ||
size: 'medium', | ||
variant: 'light' | ||
}; | ||
|
||
export default story; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
|
||
import React from 'react'; | ||
import { render, screen } from '@testing-library/react'; | ||
import userEvent from '@testing-library/user-event'; | ||
|
||
import { Table } from '.'; | ||
|
||
describe('<Table />', () => { | ||
it('should render correctly', () => {}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
import React from 'react'; | ||
import '../../../../client/src/components/layouts/global.css' | ||
|
||
import { TableProps, TableVariant } from './types'; | ||
|
||
const defaultClassNames = ['table','table-auto', 'w-full', 'border-collapse', | ||
'text-left', 'bg-transparent']; | ||
const MAX_MOBILE_WIDTH = 767; | ||
|
||
const computeWindowSize = window.innerWidth <= MAX_MOBILE_WIDTH | ||
|
||
const variantClasses: Record<TableVariant, string> = { | ||
light: 'bg-light-theme-background', | ||
dark: 'bg-dark-theme-background text-gray-0' | ||
} | ||
|
||
const computeClassNames = (size: string) => { | ||
switch (size) { | ||
case 'large': | ||
return 'text-lg' | ||
case 'small': | ||
return 'text-sm' | ||
// default is medium | ||
default: | ||
return 'text-md' | ||
} | ||
} | ||
|
||
export const Table = React.forwardRef<HTMLTableElement, TableProps>( | ||
( | ||
{ borderless, bordered, className, hover, striped, responsive, variant, size, ...props }, | ||
ref | ||
) => { | ||
props.cellPadding = 10 // Default cell padding for visual clarity in Storybook | ||
|
||
if (borderless && bordered) bordered = false; | ||
|
||
const borderClass = bordered ? "bordered" : "" | ||
const stripedClass = striped ? "table-striped" : "" | ||
const hoverClass = hover ? "table-hover" : "" | ||
|
||
const classes = [...defaultClassNames, borderClass, stripedClass, computeClassNames(size || ''), hoverClass].join(' '); | ||
|
||
|
||
const table = <table {...props} ref={ref} className={classes}/>; | ||
|
||
if (responsive) { | ||
let responsiveClass = computeWindowSize ? 'sm' : 'lg'; | ||
return <div className={responsiveClass}>{table}</div> | ||
} | ||
|
||
// For storybook use cases. Table should remain transparent to the background color | ||
// if (variant == 'light') { | ||
// return <div className={variantClasses[variant]}>{table}</div> | ||
// } else return <div className={variantClasses[variant]}>{table}</div> | ||
|
||
return table; | ||
} | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import React from "react"; | ||
|
||
export type TableVariant = 'light' | 'dark'; | ||
|
||
export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> { | ||
bordered?: boolean; | ||
borderless?: boolean; | ||
className?: string; | ||
hover?: boolean; | ||
size?: string; | ||
striped?: boolean | string; | ||
variant?: TableVariant; | ||
responsive?: boolean; | ||
} |