diff --git a/src/core/Table/Table.stories.tsx b/src/core/Table/Table.stories.tsx new file mode 100644 index 0000000..d31e1c5 --- /dev/null +++ b/src/core/Table/Table.stories.tsx @@ -0,0 +1,77 @@ +import { storiesOf } from '@storybook/react'; +import React from 'react'; +import { ThemedBackground } from '../../utils/storybook'; +import { Table } from '../Table'; +import { + tableHead, + tableData, + pageCount, + paginationData, + onChangePage, +} from './data'; + +storiesOf('Table', module) + // Litmus Portal + .add('Litmus Portal', () => ( + + + + )) + + // Kubera Chaos + .add('Kubera Chaos', () => ( + +
+ + )) + + // Kubera Propel + .add('Kubera Propel', () => ( + +
+ + )) + + // Kubera Portal + .add('Kubera Portal', () => ( + +
+ + )) + + // Kubera Core + .add('Kubera Core', () => ( + +
+ + )); diff --git a/src/core/Table/Table.tsx b/src/core/Table/Table.tsx new file mode 100644 index 0000000..186fe68 --- /dev/null +++ b/src/core/Table/Table.tsx @@ -0,0 +1,60 @@ +import { + Table as MuiTable, + TableBody, + TableContainer, + TableHead, + TablePagination, + Paper, +} from '@material-ui/core'; +import React from 'react'; +import { TableBaseProps } from './base'; +import { useStyles } from './style'; + +interface PaginationData { + pageNo: number; + rowsPerPage: number; +} + +interface TableProps extends TableBaseProps { + tableHead: React.ReactNode; + tableData: React.ReactNode; + paginationData: PaginationData; + pageCount: number; + onChangePage: (_: any, page: number) => void; + onChangeRowsPerPage?: ( + event: React.ChangeEvent + ) => void; +} + +const Table: React.FC = ({ + tableHead, + tableData, + paginationData, + pageCount, + onChangePage, + onChangeRowsPerPage, +}) => { + const classes = useStyles(); + + return ( + + + + {tableHead} + {tableData} + + + + + ); +}; + +export { Table }; diff --git a/src/core/Table/__tests__/Table.test.tsx b/src/core/Table/__tests__/Table.test.tsx new file mode 100644 index 0000000..c32ac76 --- /dev/null +++ b/src/core/Table/__tests__/Table.test.tsx @@ -0,0 +1,29 @@ +import { render } from '@testing-library/react'; +import React from 'react'; +import { KuberaThemeProvider } from '../../../theme'; +import { Table } from '../Table'; +import { + tableHead, + tableData, + pageCount, + paginationData, + onChangePage, +} from '../data'; + +describe('Basic Table Component', () => { + it('Renders', () => { + const { getByTestId } = render( + +
+ + ); + + expect(getByTestId('table')).toBeTruthy(); + }); +}); diff --git a/src/core/Table/base.ts b/src/core/Table/base.ts new file mode 100644 index 0000000..c6db04d --- /dev/null +++ b/src/core/Table/base.ts @@ -0,0 +1,3 @@ +import { TableProps } from '@material-ui/core/Table'; + +export type { TableProps as TableBaseProps }; diff --git a/src/core/Table/data.tsx b/src/core/Table/data.tsx new file mode 100644 index 0000000..aa1af67 --- /dev/null +++ b/src/core/Table/data.tsx @@ -0,0 +1,36 @@ +import { TableCell, TableRow } from '@material-ui/core'; +import React from 'react'; +import { Subtitle } from '../Text/Subtitle'; + +const tableHead = ( + + Status + Workflow Name + Target Cluster + Reliability Details + # of Steps + Last Run + + +); + +const tableData = ( + + + No records available + + +); + +const pageCount = 0; + +const paginationData = { + pageNo: 0, + rowsPerPage: 5, +}; + +const onChangePage = (_: any, page: number) => { + console.log(page); +}; + +export { tableHead, tableData, pageCount, paginationData, onChangePage }; diff --git a/src/core/Table/index.ts b/src/core/Table/index.ts new file mode 100644 index 0000000..75193ad --- /dev/null +++ b/src/core/Table/index.ts @@ -0,0 +1 @@ +export * from './Table'; diff --git a/src/core/Table/style.ts b/src/core/Table/style.ts new file mode 100644 index 0000000..f422f87 --- /dev/null +++ b/src/core/Table/style.ts @@ -0,0 +1,34 @@ +import { makeStyles, Theme } from '@material-ui/core'; + +const useStyles = makeStyles((theme: Theme) => ({ + root: { + backgroundColor: theme.palette.background.default, + }, + tableMain: { + marginTop: theme.spacing(4.25), + backgroundColor: theme.palette.background.default, + height: '29.219rem', + '&::-webkit-scrollbar': { + width: '0.2em', + }, + '&::-webkit-scrollbar-track': { + webkitBoxShadow: `inset 0 0 0.375rem ${theme.palette.border.main}`, + }, + '&::-webkit-scrollbar-thumb': { + backgroundColor: theme.palette.secondary.dark, + }, + }, + tableHead: { + '& p': { + fontWeight: 'bold', + fontSize: '0.8125rem', + }, + '& th': { + fontWeight: 'bold', + fontSize: '0.8125rem', + backgroundColor: theme.palette.background.default, + }, + }, +})); + +export { useStyles }; diff --git a/src/core/index.ts b/src/core/index.ts index 1318a69..b552e5e 100644 --- a/src/core/index.ts +++ b/src/core/index.ts @@ -8,3 +8,4 @@ export * from './ProgressBar'; export * from './RadioButton'; export * from './Search'; export * from './Text'; +export * from './Table'; \ No newline at end of file