@campxdev/shared 0.3.1 → 0.3.3

package/package.json

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

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: '16px', padding: '16px'}}>
 			<StyledAlert severity='error'>
 				{error?.message}
 				<Button

package/src/components/TableComponent/ReactTable.tsx

@@ -1,293 +1,293 @@
-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 (
+		<>
+			<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}
+					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>
+			)}
+		</>
+	)
 }
 
-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/RenderTableBody.tsx

@@ -1,65 +1,64 @@
-import { Box, TableBody, TableCell, Typography } from '@mui/material'
+import {Box, TableBody, TableCell, Typography} from '@mui/material'
 import Spinner from '../Spinner'
 import noDataImage from './no-data-illu.svg'
-import { StyledTableRow } from './styles'
+import {StyledTableRow} from './styles'
 
 export const RenderTableBody = ({
-  getTableBodyProps,
-  prepareRow,
-  rows,
-  loading,
-  currentRows,
-  colLength,
+	getTableBodyProps,
+	prepareRow,
+	rows,
+	loading,
+	colLength,
 }) => {
-  if (loading)
-    return (
-      <TableCell colSpan={colLength}>
-        <Spinner />
-      </TableCell>
-    )
+	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>
-    )
+	if (!loading && rows?.length < 1)
+		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>
-  )
+	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/index.tsx

@@ -1,184 +1,186 @@
 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 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 (
+		<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>
+									{dataSource && (
+										<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)<{
@@ -207,13 +209,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),
+			},
+		}),
+	})
 )