Add the Table Component

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', () => (
+    <ThemedBackground platform="litmus-portal">
+      <Table
+        tableData={tableData}
+        tableHead={tableHead}
+        pageCount={pageCount}
+        paginationData={paginationData}
+        onChangePage={onChangePage}
+      />
+    </ThemedBackground>
+  ))
+
+  // Kubera Chaos
+  .add('Kubera Chaos', () => (
+    <ThemedBackground platform="kubera-chaos">
+      <Table
+        tableData={tableData}
+        tableHead={tableHead}
+        pageCount={pageCount}
+        paginationData={paginationData}
+        onChangePage={onChangePage}
+      />
+    </ThemedBackground>
+  ))
+
+  // Kubera Propel
+  .add('Kubera Propel', () => (
+    <ThemedBackground platform="kubera-propel">
+      <Table
+        tableData={tableData}
+        tableHead={tableHead}
+        pageCount={pageCount}
+        paginationData={paginationData}
+        onChangePage={onChangePage}
+      />
+    </ThemedBackground>
+  ))
+
+  // Kubera Portal
+  .add('Kubera Portal', () => (
+    <ThemedBackground platform="kubera-portal">
+      <Table
+        tableData={tableData}
+        tableHead={tableHead}
+        pageCount={pageCount}
+        paginationData={paginationData}
+        onChangePage={onChangePage}
+      />
+    </ThemedBackground>
+  ))
+
+  // Kubera Core
+  .add('Kubera Core', () => (
+    <ThemedBackground platform="kubera-core">
+      <Table
+        tableData={tableData}
+        tableHead={tableHead}
+        pageCount={pageCount}
+        paginationData={paginationData}
+        onChangePage={onChangePage}
+      />
+    </ThemedBackground>
+  ));

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<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
+}
+
+const Table: React.FC<TableProps> = ({
+  tableHead,
+  tableData,
+  paginationData,
+  pageCount,
+  onChangePage,
+  onChangeRowsPerPage,
+}) => {
+  const classes = useStyles();
+
+  return (
+    <Paper className={classes.root} data-testid="table">
+      <TableContainer className={classes.tableMain}>
+        <MuiTable stickyHeader>
+          <TableHead className={classes.tableHead}>{tableHead}</TableHead>
+          <TableBody>{tableData}</TableBody>
+        </MuiTable>
+      </TableContainer>
+      <TablePagination
+        rowsPerPageOptions={[5, 10, 25]}
+        component="div"
+        count={pageCount}
+        rowsPerPage={paginationData.rowsPerPage}
+        page={paginationData.pageNo}
+        onChangePage={onChangePage}
+        onChangeRowsPerPage={onChangeRowsPerPage}
+      />
+    </Paper>
+  );
+};
+
+export { Table };

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(
+      <KuberaThemeProvider platform="kubera-chaos">
+        <Table
+          tableData={tableData}
+          tableHead={tableHead}
+          pageCount={pageCount}
+          paginationData={paginationData}
+          onChangePage={onChangePage}
+        />
+      </KuberaThemeProvider>
+    );
+
+    expect(getByTestId('table')).toBeTruthy();
+  });
+});

src/core/Table/base.ts

@@ -0,0 +1,3 @@
+import { TableProps } from '@material-ui/core/Table';
+
+export type { TableProps as TableBaseProps };

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 = (
+  <TableRow>
+    <TableCell>Status</TableCell>
+    <TableCell>Workflow Name</TableCell>
+    <TableCell>Target Cluster</TableCell>
+    <TableCell>Reliability Details</TableCell>
+    <TableCell># of Steps</TableCell>
+    <TableCell>Last Run</TableCell>
+    <TableCell />
+  </TableRow>
+);
+
+const tableData = (
+  <TableRow>
+    <TableCell colSpan={7} align="center">
+      <Subtitle>No records available</Subtitle>
+    </TableCell>
+  </TableRow>
+);
+
+const pageCount = 0;
+
+const paginationData = {
+  pageNo: 0,
+  rowsPerPage: 5,
+};
+
+const onChangePage = (_: any, page: number) => {
+  console.log(page);
+};
+
+export { tableHead, tableData, pageCount, paginationData, onChangePage };

src/core/Table/index.ts

@@ -0,0 +1 @@
+export * from './Table';

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 };

src/core/index.ts

@@ -8,3 +8,4 @@ export * from './ProgressBar';
 export * from './RadioButton';
 export * from './Search';
 export * from './Text';
+export * from './Table';