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