Add new feature: Created Table Component

src/packages/Table/index.tsx

@@ -0,0 +1,39 @@
+import React, { ReactNode } from 'react'
+import * as S from './style'
+
+export interface TableColumn {
+  title: string
+  key: string
+}
+
+export interface TableRow {
+  [key: string]: ReactNode
+}
+
+export interface TableProps {
+  columns: TableColumn[]
+  data: TableRow[]
+}
+
+const Table: React.FC<TableProps> = ({ columns, data }) => {
+  return (
+    <S.Table>
+      <S.TableHead>
+        {columns.map((column) => (
+          <S.TableHeaderCell key={column.key}>{column.title}</S.TableHeaderCell>
+        ))}
+      </S.TableHead>
+      <S.TableBody>
+        {data.map((row, index) => (
+          <tr key={index}>
+            {columns.map((column) => (
+              <S.TableCell key={column.key}>{row[column.key]}</S.TableCell>
+            ))}
+          </tr>
+        ))}
+      </S.TableBody>
+    </S.Table>
+  )
+}
+
+export default Table

src/packages/Table/stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { StoryFn, Meta } from '@storybook/react'
+import Table, { TableProps } from '.'
+
+export default {
+  title: 'Table',
+  component: Table
+} as Meta
+
+const columns = [
+  { title: 'Name', key: 'name' },
+  { title: 'Age', key: 'age' },
+  { title: 'Country', key: 'country' }
+]
+
+const data = [
+  { name: 'John', age: 30, country: 'USA' },
+  { name: 'Alice', age: 25, country: 'Canada' },
+  { name: 'Bob', age: 35, country: 'UK' }
+]
+
+const Template: StoryFn<TableProps> = (args) => <Table {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  columns,
+  data
+}

src/packages/Table/style.ts

@@ -0,0 +1,35 @@
+import styled, { css } from 'styled-components'
+
+export const Table = styled.table`
+  ${({ theme }) => css`
+    width: 100%;
+    border-collapse: collapse;
+    border-width: ${theme.border.xxsmall}
+    border-style: solid;
+    border-color: ${theme.colors.primary.light};
+    `}
+`
+
+export const TableHead = styled.thead`
+  ${({ theme }) => css`
+    background-color: ${theme.colors.base.info};
+  `}
+`
+
+export const TableHeaderCell = styled.th`
+  ${({ theme }) => css`
+    padding: ${theme.spacings.xxsmall};
+    border: ${theme.border.mini} solid ${theme.colors.primary.dark};
+  `}
+`
+
+export const TableBody = styled.tbody``
+
+export const TableCell = styled.td`
+  ${({ theme }) => css`
+    padding: ${theme.spacings.xxsmall};
+    border: ${theme.border.mini} solid ${theme.colors.primary.dark};
+    background-color: ${theme.colors.neutral.lighter};
+    text-align: center;
+  `}
+`

src/packages/index.ts

@@ -26,4 +26,5 @@ export { default as Alert } from './Alert'
 export { default as Breadcrumb } from './Breadcrumb'
 export { default as Skeleton } from './Skeleton'
 export { default as Switch } from './Switch'
+export { default as Table } from './Table'
 // export { default as Pagination } from './Pagination' TODO: review pagination styles and logic