@campxdev/shared 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@campxdev/shared",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"main": "./exports.ts",
 	"scripts": {
 		"start": "react-scripts start",

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -2,7 +2,7 @@ import {ErrorBoundary as ReactErrorBoundary} from 'react-error-boundary'
 import {QueryErrorResetBoundary} from 'react-query'
 import ErrorFallback from './ErrorFallback'
 
-export default function PageErrorBoundary({children}) {
+export default function ErrorBoundary({children}) {
 	return (
 		<QueryErrorResetBoundary>
 			{({reset}) => (

package/src/components/ErrorBoundary/ErrorFallback.tsx

@@ -21,7 +21,7 @@ const StyledAlert = styled(Alert)(({theme}) => ({
 
 export default function ErrorFallback({error, resetErrorBoundary}) {
 	return (
-		<Box sx={{padding: '16px'}}>
+		<Box sx={{marginTop: '80px', padding: '16px'}}>
 			<StyledAlert severity='error'>
 				{error?.message}
 				<Button

package/src/components/ErrorBoundary/index.tsx

@@ -1 +1 @@
-export {default} from './ErrorFallback'
+export {default} from './ErrorBoundary'

package/src/components/Layout/Header/UserBox.tsx

@@ -25,6 +25,9 @@ export default function UserBox({
 								width: '32px',
 								objectFit: 'contain',
 							}}
+							onError={(e: any) => {
+								e.target.src = avatarImage
+							}}
 						/>
 						<Typography variant='h6'>{username}</Typography>
 					</StyledUser>

package/src/components/Spinner.tsx

@@ -1,18 +1,18 @@
-import { CircularProgress } from '@mui/material'
+import {CircularProgress} from '@mui/material'
 
-function Spinner() {
-  return (
-    <div
-      style={{
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '200px',
-        display: 'flex',
-      }}
-    >
-      <CircularProgress />
-    </div>
-  )
+function Spinner({height = '200px'}: {height?: string | number}) {
+	return (
+		<div
+			style={{
+				justifyContent: 'center',
+				alignItems: 'center',
+				height,
+				display: 'flex',
+			}}
+		>
+			<CircularProgress />
+		</div>
+	)
 }
 
 export default Spinner

package/src/components/TableComponent/ReactTable.tsx

@@ -1,293 +1,294 @@
-import { ExpandMore } from '@mui/icons-material'
+import {ExpandMore} from '@mui/icons-material'
 import {
-  Box,
-  Checkbox,
-  IconButton,
-  ListItemIcon,
-  MenuItem,
-  Table,
-  TableCell,
-  TableHead,
-  TableRow,
-  Typography,
+	Box,
+	Checkbox,
+	IconButton,
+	ListItemIcon,
+	MenuItem,
+	Table,
+	TableCell,
+	TableHead,
+	TableRow,
+	Typography,
 } from '@mui/material'
-import { useEffect, useMemo, useState } from 'react'
-import { usePagination, useRowSelect, useTable } from 'react-table'
+import {useEffect, useMemo, useState} from 'react'
+import {usePagination, useRowSelect, useTable} from 'react-table'
+import ErrorBoundary from '../ErrorBoundary'
 import BatchActionsHeader from './BatchActionsHeader'
-import { SortAscIcon, SortDescIcon, SortIcon } from './Icons'
-import { RenderTableBody } from './RenderTableBody'
+import {SortAscIcon, SortDescIcon, SortIcon} from './Icons'
+import {RenderTableBody} from './RenderTableBody'
 import {
-  StyledLimitBox,
-  StyledLimitMenu,
-  StyledPagination,
-  StyledTableFooter,
+	StyledLimitBox,
+	StyledLimitMenu,
+	StyledPagination,
+	StyledTableFooter,
 } from './styles'
-import { TableStats } from './TableFooter/TableFooter'
-import { ColumnProps, Sort, TableProps } from './types'
+import {TableStats} from './TableFooter/TableFooter'
+import {ColumnProps, Sort, TableProps} from './types'
 
 type ReactTableCell = {
-  Header: any
-  accessor: any
-  Cell?: any
-  sort?: boolean
+	Header: any
+	accessor: any
+	Cell?: any
+	sort?: boolean
 } & ColumnProps
 
 const selectColumn = {
-  id: 'selection',
-  Header: ({ getToggleAllPageRowsSelectedProps }) => (
-    <Checkbox size="small" {...getToggleAllPageRowsSelectedProps()} />
-  ),
-  Cell: ({ row }) => (
-    <Checkbox size="small" {...row.getToggleRowSelectedProps()} />
-  ),
+	id: 'selection',
+	Header: ({getToggleAllPageRowsSelectedProps}) => (
+		<Checkbox size='small' {...getToggleAllPageRowsSelectedProps()} />
+	),
+	Cell: ({row}) => (
+		<Checkbox size='small' {...row.getToggleRowSelectedProps()} />
+	),
 }
 
 const getTableCol = (headerItem: ColumnProps) => {
-  let col: ReactTableCell = {
-    Header: headerItem?.title,
-    accessor: headerItem?.dataIndex,
-    ...headerItem,
-  }
+	let col: ReactTableCell = {
+		Header: headerItem?.title,
+		accessor: headerItem?.dataIndex,
+		...headerItem,
+	}
 
-  if (headerItem?.render) {
-    return {
-      ...col,
-      Cell: ({ row }) =>
-        headerItem?.render(
-          row?.original[headerItem?.dataIndex],
-          row?.original,
-          row?.index,
-        ),
-    }
-  }
-  return col
+	if (headerItem?.render) {
+		return {
+			...col,
+			Cell: ({row}) =>
+				headerItem?.render(
+					row?.original[headerItem?.dataIndex],
+					row?.original,
+					row?.index
+				),
+		}
+	}
+	return col
 }
 
 export default function TableComponent({
-  columns,
-  dataSource,
-  loading,
-  pagination,
-  refetching,
-  onSort,
-  select = {
-    enable: false,
-  },
+	columns,
+	dataSource,
+	loading,
+	pagination,
+	refetching,
+	onSort,
+	select = {
+		enable: false,
+	},
 }: TableProps) {
-  const [sort, setSort] = useState<Sort>({})
+	const [sort, setSort] = useState<Sort>({})
 
-  const headers = useMemo(() => {
-    if (!columns) return []
+	const headers = useMemo(() => {
+		if (!columns) return []
 
-    return columns?.map((item) => getTableCol(item))
-  }, [columns])
+		return columns?.map((item) => getTableCol(item))
+	}, [columns])
 
-  const tableData = useMemo(() => {
-    if (!dataSource) return []
-    return [...dataSource]
-  }, [dataSource])
+	const tableData = useMemo(() => {
+		if (!dataSource) return []
+		return [...dataSource]
+	}, [dataSource])
 
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    rows,
-    prepareRow,
-    pageCount,
-    gotoPage,
-    setPageSize,
-    selectedFlatRows,
-    toggleAllRowsSelected,
-    state: { pageIndex, pageSize, selectedRowIds },
-  } = useTable(
-    {
-      columns: headers || [],
-      data: tableData || [],
-      stateReducer: (newState, action) => {
-        switch (action.type) {
-          case 'toggleAllRowsSelected':
-            return {
-              ...newState,
-              selectedRowIds: {},
-            }
+	const {
+		getTableProps,
+		getTableBodyProps,
+		headerGroups,
+		rows,
+		prepareRow,
+		pageCount,
+		gotoPage,
+		setPageSize,
+		selectedFlatRows,
+		toggleAllRowsSelected,
+		state: {pageIndex, pageSize, selectedRowIds},
+	} = useTable(
+		{
+			columns: headers || [],
+			data: tableData || [],
+			stateReducer: (newState, action) => {
+				switch (action.type) {
+					case 'toggleAllRowsSelected':
+						return {
+							...newState,
+							selectedRowIds: {},
+						}
 
-          default:
-            return newState
-        }
-      },
-      initialState: {
-        pageIndex: pagination?.page ?? 0,
-        pageSize: pagination?.limit ?? 10,
-      },
-      manualPagination: true,
-      autoResetSelectedRows: false,
-      pageCount: pagination?.totalCount ?? dataSource?.length,
-      getRowId: select?.enable
-        ? (row) => {
-            return row?.id
-          }
-        : undefined,
-    },
-    // useSortBy,
-    usePagination,
-    useRowSelect,
-    (hooks) => {
-      if (!select.enable) return
-      hooks.visibleColumns.push((columns) => [selectColumn, ...columns])
-    },
-  )
+					default:
+						return newState
+				}
+			},
+			initialState: {
+				pageIndex: pagination?.page ?? 0,
+				pageSize: pagination?.limit ?? 10,
+			},
+			manualPagination: true,
+			autoResetSelectedRows: false,
+			pageCount: pagination?.totalCount ?? dataSource?.length,
+			getRowId: select?.enable
+				? (row) => {
+						return row?.id
+				  }
+				: undefined,
+		},
+		// useSortBy,
+		usePagination,
+		useRowSelect,
+		(hooks) => {
+			if (!select.enable) return
+			hooks.visibleColumns.push((columns) => [selectColumn, ...columns])
+		}
+	)
 
-  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
+	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])
+		onSort({
+			sortBy: Object.keys(sort).join(','),
+			sortOrder: Object.keys(sort)
+				.map((item) => sort[item])
+				.join(','),
+		})
+	}, [sort])
 
-  const handlePagination = (e, value) => {
-    gotoPage(value - 1)
-  }
+	const handlePagination = (e, value) => {
+		gotoPage(value - 1)
+	}
 
-  useEffect(() => {
-    if (!pagination) return
-    pagination.onChange(pageIndex * pageSize)
-  }, [pageIndex])
+	useEffect(() => {
+		if (!pagination) return
+		pagination.onChange(pageIndex * pageSize)
+	}, [pageIndex])
 
-  useEffect(() => {
-    if (!pagination) return
-    pagination.onChangeLimit(pageSize)
-    pagination.onChange(0)
-  }, [pageSize])
+	useEffect(() => {
+		if (!pagination) return
+		pagination.onChangeLimit(pageSize)
+		pagination.onChange(0)
+	}, [pageSize])
 
-  const clearSelection = () => {
-    toggleAllRowsSelected(false)
-  }
+	const clearSelection = () => {
+		toggleAllRowsSelected(false)
+	}
 
-  return (
-    <>
-      <BatchActionsHeader
-        actions={select?.actions || []}
-        selectedRowIds={selectedRowIds}
-        clearSelection={clearSelection}
-      />
-      <Table sx={{ position: 'relative' }} {...getTableProps()}>
-        <TableHead>
-          {headerGroups.map((headerGroup, index) => (
-            <TableRow key={index} {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map((column: any, index) => (
-                <TableCell key={index} {...column.getHeaderProps()}>
-                  {column.render('Header')}
-                  {column.sort && (
-                    <IconButton onClick={() => handleSortClick(column.id)}>
-                      <ListItemIcon>
-                        {sort[column.id] === 'asc' ? (
-                          <SortAscIcon />
-                        ) : sort[column.id] === 'desc' ? (
-                          <SortDescIcon />
-                        ) : (
-                          <SortIcon />
-                        )}
-                      </ListItemIcon>
-                    </IconButton>
-                  )}
-                </TableCell>
-              ))}
-            </TableRow>
-          ))}
-        </TableHead>
-        <RenderTableBody
-          colLength={columns?.length}
-          loading={loading || refetching}
-          currentRows={rows?.length}
-          getTableBodyProps={getTableBodyProps}
-          rows={rows}
-          prepareRow={prepareRow}
-        />
-      </Table>
-      {pagination && dataSource && !loading && (
-        <StyledTableFooter>
-          <TableStats
-            limit={pageSize}
-            page={pageIndex + 1}
-            totalCount={pageCount}
-          />
-          <StyledPagination
-            variant="outlined"
-            shape="rounded"
-            onChange={handlePagination}
-            count={Math.ceil(pageCount / pageSize)}
-            page={pageIndex + 1}
-          />
-          <Limit pageSize={pageSize} setPageSize={setPageSize} />
-        </StyledTableFooter>
-      )}
-    </>
-  )
+	return (
+		<ErrorBoundary>
+			<BatchActionsHeader
+				actions={select?.actions || []}
+				selectedRowIds={selectedRowIds}
+				clearSelection={clearSelection}
+			/>
+			<Table sx={{position: 'relative'}} {...getTableProps()}>
+				<TableHead>
+					{headerGroups.map((headerGroup, index) => (
+						<TableRow key={index} {...headerGroup.getHeaderGroupProps()}>
+							{headerGroup.headers.map((column: any, index) => (
+								<TableCell key={index} {...column.getHeaderProps()}>
+									{column.render('Header')}
+									{column.sort && (
+										<IconButton onClick={() => handleSortClick(column.id)}>
+											<ListItemIcon>
+												{sort[column.id] === 'asc' ? (
+													<SortAscIcon />
+												) : sort[column.id] === 'desc' ? (
+													<SortDescIcon />
+												) : (
+													<SortIcon />
+												)}
+											</ListItemIcon>
+										</IconButton>
+									)}
+								</TableCell>
+							))}
+						</TableRow>
+					))}
+				</TableHead>
+				<RenderTableBody
+					colLength={columns?.length}
+					loading={loading || refetching}
+					currentRows={rows?.length}
+					getTableBodyProps={getTableBodyProps}
+					rows={rows}
+					prepareRow={prepareRow}
+				/>
+			</Table>
+			{pagination && dataSource && !loading && (
+				<StyledTableFooter>
+					<TableStats
+						limit={pageSize}
+						page={pageIndex + 1}
+						totalCount={pageCount}
+					/>
+					<StyledPagination
+						variant='outlined'
+						shape='rounded'
+						onChange={handlePagination}
+						count={Math.ceil(pageCount / pageSize)}
+						page={pageIndex + 1}
+					/>
+					<Limit pageSize={pageSize} setPageSize={setPageSize} />
+				</StyledTableFooter>
+			)}
+		</ErrorBoundary>
+	)
 }
 
-const Limit = ({ pageSize, setPageSize }) => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-  const open = Boolean(anchorEl)
+const Limit = ({pageSize, setPageSize}) => {
+	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+	const open = Boolean(anchorEl)
 
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget)
-  }
+	const handleClick = (event) => {
+		setAnchorEl(event.currentTarget)
+	}
 
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-  const menuItems = [
-    { label: '10', value: 10 },
-    { label: '20', value: 20 },
-    { label: '50', value: 50 },
-    { label: '100', value: 100 },
-  ]
+	const handleClose = () => {
+		setAnchorEl(null)
+	}
+	const menuItems = [
+		{label: '10', value: 10},
+		{label: '20', value: 20},
+		{label: '50', value: 50},
+		{label: '100', value: 100},
+	]
 
-  return (
-    <StyledLimitBox open={open}>
-      <Box onClick={handleClick}>
-        <Typography>{`${pageSize} / Page`}</Typography>
-        <ExpandMore />
-      </Box>
-      <StyledLimitMenu
-        id="basic-menu"
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-      >
-        {menuItems?.map((item, index) => (
-          <MenuItem
-            onClick={() => {
-              setPageSize(item?.value)
-              handleClose()
-            }}
-            value={item?.value}
-            key={index}
-          >
-            {item?.label}
-          </MenuItem>
-        ))}
-      </StyledLimitMenu>
-    </StyledLimitBox>
-  )
+	return (
+		<StyledLimitBox open={open}>
+			<Box onClick={handleClick}>
+				<Typography>{`${pageSize} / Page`}</Typography>
+				<ExpandMore />
+			</Box>
+			<StyledLimitMenu
+				id='basic-menu'
+				anchorEl={anchorEl}
+				open={open}
+				onClose={handleClose}
+			>
+				{menuItems?.map((item, index) => (
+					<MenuItem
+						onClick={() => {
+							setPageSize(item?.value)
+							handleClose()
+						}}
+						value={item?.value}
+						key={index}
+					>
+						{item?.label}
+					</MenuItem>
+				))}
+			</StyledLimitMenu>
+		</StyledLimitBox>
+	)
 }

package/src/components/TableComponent/index.tsx

@@ -1,184 +1,189 @@
 import {
-  alpha,
-  Box,
-  IconButton,
-  ListItemIcon,
-  styled,
-  Table as MuiTable,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Typography,
+	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 {useEffect, useState} from 'react'
+import ErrorBoundary from '../ErrorBoundary'
 import Spinner from '../Spinner'
-import { SortAscIcon, SortDescIcon, SortIcon } from './Icons'
+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
+	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
+	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,
+	columns,
+	dataSource,
+	onRowClick,
+	pagination,
+	loading,
+	onSort,
+	dense = false,
 }: TableProps) {
-  const [sort, setSort] = useState<Sort>({})
+	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',
-        }
-      }
-    })
-  }
+	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
+	useEffect(() => {
+		if (!onSort) return
 
-    onSort({
-      sortBy: Object.keys(sort).join(','),
-      sortOrder: Object.keys(sort)
-        .map((item) => sort[item])
-        .join(','),
-    })
-  }, [sort])
+		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>
-  )
+	return (
+		<ErrorBoundary>
+			<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>
+		</ErrorBoundary>
+	)
 }
 
 // const StyledSortButton = styled(IconButton)<{
@@ -207,13 +212,13 @@ export default function Table({
 //   }),
 // }))
 
-const StyledTableRow = styled(TableRow)<{ canRowClick: boolean }>(
-  ({ theme, canRowClick }) => ({
-    ...(canRowClick && {
-      cursor: 'pointer',
-      '&.MuiTableRow-hover:hover': {
-        backgroundColor: alpha('#f2f2f2', 0.4),
-      },
-    }),
-  }),
+const StyledTableRow = styled(TableRow)<{canRowClick: boolean}>(
+	({theme, canRowClick}) => ({
+		...(canRowClick && {
+			cursor: 'pointer',
+			'&.MuiTableRow-hover:hover': {
+				backgroundColor: alpha('#f2f2f2', 0.4),
+			},
+		}),
+	})
 )