@campxdev/shared 0.1.0

package/src/components/TableComponent/RenderTableBody.tsx

@@ -0,0 +1,65 @@
+import { Box, TableBody, TableCell, Typography } from '@mui/material'
+import Spinner from '../Spinner'
+import noDataImage from './no-data-illu.svg'
+import { StyledTableRow } from './styles'
+
+export const RenderTableBody = ({
+  getTableBodyProps,
+  prepareRow,
+  rows,
+  loading,
+  currentRows,
+  colLength,
+}) => {
+  if (loading)
+    return (
+      <TableCell colSpan={colLength}>
+        <Spinner />
+      </TableCell>
+    )
+
+  if (!loading && currentRows === 0)
+    return (
+      <TableCell colSpan={colLength}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <img
+            style={{ width: '200px', height: 'auto', textAlign: 'center' }}
+            src={noDataImage}
+          />
+          <Typography variant="h6" align="center">
+            No Records Found
+          </Typography>
+        </Box>
+      </TableCell>
+    )
+
+  return (
+    <TableBody {...getTableBodyProps()}>
+      {rows?.map((row, index) => {
+        prepareRow(row)
+        return (
+          <StyledTableRow
+            key={index}
+            {...row.getRowProps()}
+            isSelected={row?.isSelected}
+          >
+            {row.cells?.map((cell, index) => {
+              return (
+                <TableCell key={index} {...cell.getCellProps()}>
+                  {cell?.render('Cell')}
+                </TableCell>
+              )
+            })}
+          </StyledTableRow>
+        )
+      })}
+    </TableBody>
+  )
+}

package/src/components/TableComponent/TableFooter/TableFooter.tsx

@@ -0,0 +1,102 @@
+import { Box, Typography } from '@mui/material'
+import DropDownButton from '../../DropDownButton'
+import { StyledPagination, StyledTableFooter } from '../styles'
+
+interface TableFooterProps {
+  totalCount: number
+  limit: number
+  handlePagination: (v: number) => void
+  page: number
+  handlePageLimit?: (v: number) => void
+}
+
+export default function TableFooter({
+  totalCount,
+  limit,
+  handlePagination,
+  page,
+  handlePageLimit,
+}: TableFooterProps) {
+  const onChange = (v: number) => {
+    handlePagination(v)
+  }
+  return (
+    <StyledTableFooter>
+      <TableStats limit={limit} totalCount={totalCount} page={page} />
+      <StyledPagination
+        page={page}
+        count={Math.ceil(totalCount / limit)}
+        onChange={(e, v) => onChange(v)}
+        variant="outlined"
+        shape="rounded"
+      />
+      {handlePageLimit ? (
+        <LimitField handlePageLimit={handlePageLimit} limit={limit} />
+      ) : (
+        <Box></Box>
+      )}
+    </StyledTableFooter>
+  )
+}
+
+export const TableStats = ({
+  limit,
+  totalCount,
+  page,
+}: {
+  limit: number
+  page: number
+  totalCount: number
+}) => {
+  const pageStart = (page - 1) * limit + 1
+  const pageEnd = page * limit <= totalCount ? page * limit : totalCount
+
+  return (
+    <Box>
+      <Typography variant="subtitle1">{`${pageStart} - ${pageEnd} of ${totalCount}`}</Typography>
+    </Box>
+  )
+}
+
+const LimitField = ({ handlePageLimit, limit }) => {
+  return (
+    <Box>
+      <DropDownButton
+        buttonProps={{
+          variant: 'outlined',
+          color: 'secondary',
+          sx: {
+            padding: '0px 10px',
+            color: '#121212',
+            fontSize: '13px',
+            border: '1px solid #1212121A',
+          },
+        }}
+        label={`${limit} / page`}
+        menu={[
+          {
+            label: 10,
+            onClick: () => handlePageLimit(10),
+          },
+
+          {
+            label: 20,
+            onClick: () => handlePageLimit(20),
+          },
+          {
+            label: 30,
+            onClick: () => handlePageLimit(30),
+          },
+          {
+            label: 50,
+            onClick: () => handlePageLimit(50),
+          },
+          {
+            label: 100,
+            onClick: () => handlePageLimit(100),
+          },
+        ]}
+      />
+    </Box>
+  )
+}

package/src/components/TableComponent/TableFooter/index.tsx

@@ -0,0 +1 @@
+export { default } from './TableFooter'

package/src/components/TableComponent/TableFooter/styles.tsx

@@ -0,0 +1,28 @@
+import { Box, Pagination, styled } from '@mui/material'
+
+export const StyledTableStats = styled(Box)(({}) => ({}))
+
+export const StyledTableFooter = styled(Box)(({ theme }) => ({
+  paddingTop: '1rem',
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+}))
+
+export const StyledPagination = styled(Pagination)(({ theme }) => ({
+  '& .MuiPaginationItem-root': {
+    border: 'none',
+    background: theme.palette.secondary.dark,
+  },
+  '& .MuiPaginationItem-previousNext': {
+    border: theme.borders.grayLight,
+    background: theme.palette.common.white,
+  },
+  '& .Mui-selected': {
+    border: `2px solid ${theme.palette.common.yellow}`,
+  },
+  '& .MuiPaginationItem-ellipsis': {
+    background: theme.palette.common.white,
+  },
+}))

package/src/components/TableComponent/index.tsx

@@ -0,0 +1,219 @@
+import {
+  alpha,
+  Box,
+  IconButton,
+  ListItemIcon,
+  styled,
+  Table as MuiTable,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from '@mui/material'
+import _ from 'lodash'
+import { useEffect, useState } from 'react'
+import Spinner from '../Spinner'
+import { SortAscIcon, SortDescIcon, SortIcon } from './Icons'
+import TableFooter from './TableFooter'
+
+export interface ColumnProps {
+  dataIndex: string
+  key: string
+  title: any
+  render?: (cellData: any, row: any, index: number) => any
+  textColor?: string
+  sort?: boolean
+  width?: string //pixels
+}
+
+interface TableProps {
+  columns: Array<ColumnProps>
+  rowKey?: string
+  dataSource?: any[]
+  loading?: boolean
+  onRowClick?: (row: any) => void
+  pagination?: {
+    page: number
+    limit: number
+    totalCount: number
+    onChange: (v: number) => void
+    onChangeLimit?: (v: number) => void
+  }
+  onSort?: (sort: any) => void
+  dense?: boolean
+}
+
+type Order = 'asc' | 'desc' | ''
+type Sort = {}
+
+export default function Table({
+  columns,
+  dataSource,
+  onRowClick,
+  pagination,
+  loading,
+  onSort,
+  dense = false,
+}: TableProps) {
+  const [sort, setSort] = useState<Sort>({})
+
+  const handleSortClick = (sortBykey) => {
+    setSort((prev) => {
+      if (prev[sortBykey]) {
+        if (prev[sortBykey] === 'desc') return { ...prev, [sortBykey]: 'asc' }
+        if (prev[sortBykey] === 'asc') {
+          delete prev[sortBykey]
+          return { ...prev }
+        }
+      } else {
+        return {
+          ...prev,
+          [sortBykey]: 'desc',
+        }
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (!onSort) return
+
+    onSort({
+      sortBy: Object.keys(sort).join(','),
+      sortOrder: Object.keys(sort)
+        .map((item) => sort[item])
+        .join(','),
+    })
+  }, [sort])
+
+  return (
+    <TableContainer>
+      <>
+        <MuiTable>
+          <TableHead>
+            <TableRow>
+              {columns.map((col, index) => (
+                <TableCell
+                  key={index}
+                  sx={{
+                    ...(col?.width && {
+                      width: col?.width,
+                    }),
+                  }}
+                >
+                  <>
+                    <Box>{col.title}</Box>
+                  </>
+                  {col.sort && (
+                    <IconButton onClick={() => handleSortClick(col.dataIndex)}>
+                      <ListItemIcon>
+                        {sort[col.dataIndex] === 'asc' ? (
+                          <SortAscIcon />
+                        ) : sort[col.dataIndex] === 'desc' ? (
+                          <SortDescIcon />
+                        ) : (
+                          <SortIcon />
+                        )}
+                      </ListItemIcon>
+                    </IconButton>
+                  )}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          {!loading ? (
+            <>
+              {dataSource?.length ? (
+                <TableBody>
+                  {dataSource?.map((row, index) => (
+                    <StyledTableRow
+                      canRowClick={!!onRowClick}
+                      hover={!!onRowClick}
+                      key={index}
+                      onClick={() => {
+                        return onRowClick && onRowClick(row)
+                      }}
+                    >
+                      {columns.map((col, colIndex) => (
+                        <TableCell
+                          sx={{
+                            color: col.textColor,
+                            padding: dense ? '10px' : '15px',
+                          }}
+                          key={colIndex}
+                        >
+                          <>
+                            {col?.render
+                              ? col.render(row[col.dataIndex], row, index)
+                              : _.get(row, col.dataIndex)}
+                          </>
+                        </TableCell>
+                      ))}
+                    </StyledTableRow>
+                  ))}
+                </TableBody>
+              ) : (
+                <Box>
+                  <Typography sx={{ padding: '10px' }}>
+                    No Records Found !..
+                  </Typography>
+                </Box>
+              )}
+            </>
+          ) : (
+            <Spinner />
+          )}
+        </MuiTable>
+      </>
+      <>
+        {pagination && (
+          <TableFooter
+            page={pagination.page}
+            limit={pagination.limit}
+            totalCount={pagination.totalCount}
+            handlePagination={pagination.onChange}
+            handlePageLimit={pagination.onChangeLimit}
+          />
+        )}
+      </>
+    </TableContainer>
+  )
+}
+
+// const StyledSortButton = styled(IconButton)<{
+//   sortOrder: Order
+//   dataIndex: string
+// }>(({ theme, sortOrder, dataIndex }) => ({
+//   marginLeft: '10px',
+//   ...(sortOrder === '' && {
+//     '& .MuiSvgIcon-root': {
+//       // visibility: 'hidden',
+//     },
+//     // '&:hover .MuiSvgIcon-root': {
+//     //   visibility: 'visible',
+//     //   opacity: 0.4,
+//     // },
+//     transition: 'transform 1s ease-in-out',
+//   }),
+//   ...(sortOrder === 'asc' && {
+//     transition: 'transform 1s ease-in-out',
+//   }),
+//   ...(sortOrder === 'desc' && {
+//     '& .MuiSvgIcon-root': {
+//       transform: 'rotate(180deg)',
+//     },
+//     transition: 'transform 1s ease-in-out',
+//   }),
+// }))
+
+const StyledTableRow = styled(TableRow)<{ canRowClick: boolean }>(
+  ({ theme, canRowClick }) => ({
+    ...(canRowClick && {
+      cursor: 'pointer',
+      '&.MuiTableRow-hover:hover': {
+        backgroundColor: alpha('#f2f2f2', 0.4),
+      },
+    }),
+  }),
+)