feat(table): added table component

docs/src/components/Sidebar.js

@@ -56,6 +56,10 @@ const sidebarLinks = [
     name: 'Tabs',
     ref: '/tab',
   },
+  {
+    name:'Table',
+    ref:'/table'
+  }
 ];
 
 export const cssNavLink = css`

docs/src/pages/table.md

@@ -0,0 +1,64 @@
+# Table
+
+Primitive checkbox component styled as Switch.
+
+<Editor>
+
+```jsx
+<Table
+  dataSource={[
+    {
+      number: 1,
+      name: 'Praveen',
+      marks: '50',
+    },
+    {
+      number: 2,
+      name: 'Kavin',
+      marks: '20',
+    },
+    {
+      number: 3,
+      name: 'Rahul',
+      marks: '80',
+    },
+    {
+      number: 4,
+      name: 'Dhanush',
+      marks: '10',
+    },
+  ]}
+  colNames={[
+    { title: 'Number', key: 'number' },
+    { title: 'Name', key: 'name' },
+    {
+      title: 'Marks',
+      key: 'marks',
+      sortable: true,
+      render: columnData => {
+        if (columnData >= 25) {
+          return <p style={{ color: 'green', margin: 0 }}>{columnData}</p>;
+        }
+        return <p style={{ color: 'red', margin: 0 }}>{columnData}</p>;
+      },
+    },
+  ]}
+  hoverable={true}
+/>
+```
+
+</Editor>
+
+
+
+### Props
+
+| Prop                     | Type                     | Description                                                                                                        |
+| ------------------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------ |
+| `dataSource`             | object                   | Source of the data applied to the table. .                                                                                        |
+| `colNames`               | object                   | Column names of the table.                                                                                      |
+| `bordered`               | boolean                  | Apply borders for the table.                          |
+| `stripped`               | boolean                  | Makes the table with zebra stripped pattern.                                            |
+| `hoverable`              | boolean                  | Apply hover effect on the table.                               |
+| `headerColor`            | string                   | Change the header colour of the table.|
+| `variant`                | string                   | Property to apply customize modal styles with theme.json. Click [here](/theming) to know more about theming modals |

docs/src/theme.js

@@ -126,6 +126,26 @@ export default {
       },
     },
   },
+  table: {
+    primary: {
+      container: {
+        width: 750,
+        bg: 'white',
+      },
+      td: {
+        fontSize: 14,
+        p: 10,
+      },
+      th: {
+        fontSize: 16,
+        p: 10,
+        fontWeight: 'bold',
+      },
+      headerText: {
+        mr: 10,
+      },
+    },
+  },
 
   switch: {
     sm: {
@@ -245,7 +265,7 @@ export default {
       },
     },
   },
-  
+
   inputGroup: {
     primary: {
       marginTop: '10px',
@@ -298,7 +318,6 @@ export default {
       separater: {
         mx: 3,
       },
-
     },
   },
 };

src/components/index.js

@@ -1,24 +1,25 @@
-export * from 'theme-ui';
+export * from "theme-ui";
 
-export { Relative, Absolute, Fixed, Sticky } from './position';
-export { Inline, InlineBlock, InlineFlex } from './layout';
-export Background from './background';
-export Input from './input';
-export Textarea from './textArea';
-export Select from './select';
-export IconButton from './iconButton';
-export Truncate from './truncate';
-export ReadMore from './readMore';
-export Hide from './hide';
-export withBeforeAfter from './withBeforeAfter';
-export Tooltip from './tooltip';
-export { Modal, openModal, closeModal, PortableModalContainer } from './modal';
-export { Toast, openToast, PortableToastContainer } from './toast';
-export DropdownMenu from './dropdownMenu';
-export Pill from './pill';
-export Switch from './switch';
-export ButtonGroup from './buttonGroup';
-export InputGroup from './inputGroup';
-export Tabs from './tab';
-export Collapse from './collapse';
-export Breadcrumbs from './breadcrumbs';
+export { Relative, Absolute, Fixed, Sticky } from "./position";
+export { Inline, InlineBlock, InlineFlex } from "./layout";
+export Background from "./background";
+export Input from "./input";
+export Textarea from "./textArea";
+export Select from "./select";
+export IconButton from "./iconButton";
+export Truncate from "./truncate";
+export ReadMore from "./readMore";
+export Hide from "./hide";
+export withBeforeAfter from "./withBeforeAfter";
+export Tooltip from "./tooltip";
+export { Modal, openModal, closeModal, PortableModalContainer } from "./modal";
+export { Toast, openToast, PortableToastContainer } from "./toast";
+export DropdownMenu from "./dropdownMenu";
+export Pill from "./pill";
+export Switch from "./switch";
+export ButtonGroup from "./buttonGroup";
+export InputGroup from "./inputGroup";
+export Tabs from "./tab";
+export Collapse from "./collapse";
+export Breadcrumbs from "./breadcrumbs";
+export Table from "./table";

src/components/table/components.js

@@ -0,0 +1,86 @@
+import styled from '@emotion/styled';
+import { Box, Text, css } from 'theme-ui';
+import { applyVariation } from '../../utils/getStyles';
+
+const TableContainer = styled(Box)`
+  ${({ theme }) =>
+    css({
+      overflowX: 'auto',
+    })(theme)}
+  ${({ theme, variant }) =>
+    applyVariation(theme, `${variant}.container`, 'table')}
+`;
+
+const DefaultTable = styled.table`
+  ${({ theme }) =>
+    css({
+      borderCollapse: 'collapse',
+      width: '100%',
+    })(theme)}
+  ${({ theme, variant }) => applyVariation(theme, `${variant}.table`, 'table')}
+`;
+
+const Tr = styled.tr`
+  ${({ theme, stripped = false, hoverable = false, bordered = true }) =>
+    css({
+      textAlign: 'left',
+      ...(stripped ? { ':nth-child(odd)': { bg: '#f2f2f2' } } : null),
+      ...(hoverable ? { '&:hover': { bg: '#f2f2f2' } } : null),
+      ...(bordered ? { border: '1px solid #dddddd' } : null),
+    })(theme)}
+  ${({ theme, variant }) => applyVariation(theme, `${variant}.tr`, 'table')}
+`;
+
+const Td = styled.td`
+  ${({ theme }) =>
+    css({
+      bg: 'inherit',
+      color: 'inherit',
+    })(theme)}
+  ${({ theme, variant }) => applyVariation(theme, `${variant}.td`, 'table')}
+`;
+
+const Th = styled.th`
+  ${({ theme, headerColor, sortable }) =>
+    css({
+      bg: headerColor.length > 0 ? headerColor : 'inherit',
+      cursor: sortable ? 'pointer' : 'default',
+      color: 'inherit',
+    })(theme)}
+  ${({ theme, variant }) => applyVariation(theme, `${variant}.th`, 'table')}
+`;
+
+const ArrowIcon = styled(Box)`
+  ${({ theme, ascendingOrder }) =>
+    css({
+      transition: 'all 0.3s ease-in-out',
+      cursor: 'pointer',
+      transform: ascendingOrder === 'true' ? 'rotate(0)' : 'rotate(-180deg)',
+    })(theme)}
+  ${({ theme, variant }) =>
+    applyVariation(theme, `${variant}.arrowIcon`, 'table')}
+`;
+
+const HeaderContainer = styled(Box)`
+  ${({ theme }) =>
+    css({
+      display: 'flex',
+      alignItems: 'center',
+    })(theme)}
+  ${({ theme, variant }) =>
+    applyVariation(theme, `${variant}.headerContainer`, 'table')}
+`;
+const HeaderText = styled(Text)(({ theme, variant = 'primary' }) =>
+  applyVariation(theme, `${variant}.headerText`, 'table')
+);
+
+export {
+  TableContainer,
+  DefaultTable,
+  Tr,
+  Td,
+  Th,
+  ArrowIcon,
+  HeaderContainer,
+  HeaderText,
+};