@campxdev/shared 1.10.68 → 1.10.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.10.68",
+  "version": "1.10.69",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",
@@ -27,12 +27,13 @@
     ]
   },
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^2.9.10",
-    "@mui/icons-material": "^5.6.2",
-    "@mui/lab": "^5.0.0-alpha.112",
-    "@mui/material": "^5.7.0",
+    "@mui/icons-material": "^5.14.11",
+    "@mui/lab": "^5.0.0-alpha.146",
+    "@mui/material": "^5.14.11",
+    "@mui/x-date-pickers": "^6.16.0",
     "axios": "^0.27.2",
     "date-fns": "^2.28.0",
     "fuse.js": "^6.6.2",

package/src/components/FeeCard.tsx

@@ -0,0 +1,132 @@
+import { Box, Stack, Typography, styled } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+import LabelValue from './LabelValue'
+
+const FeeCard = ({
+  title = null,
+  amount,
+  path = null,
+  yearRestricted = false,
+  cardHeight = '170px',
+  payButtonHeight = '50px',
+  isCardDue = false,
+  paymentPath = null,
+  image = null,
+  labelValue = 'Total due amount',
+}) => {
+  const navigate = useNavigate()
+
+  const handleInformation = (path) => {
+    navigate(`${path}`)
+  }
+
+  const handleClick = (due) => {
+    if (!due) return
+
+    navigate(`${paymentPath}`)
+  }
+
+  return (
+    <StyledYearCard isCardDue={isCardDue} height={cardHeight}>
+      <Box style={{ padding: '20px', width: '100%' }}>
+        {title && (
+          <Stack
+            alignItems={'center'}
+            direction={'row'}
+            justifyContent={'space-between'}
+            sx={{
+              paddingBottom: '18px',
+            }}
+          >
+            <Typography
+              variant="subtitle1"
+              sx={{ color: 'white', fontWeight: '600' }}
+            >
+              {title}
+            </Typography>
+            <img
+              style={{ height: '20px', width: '20px', cursor: 'pointer' }}
+              src={image}
+              onClick={() => handleInformation(path)}
+            />
+          </Stack>
+        )}
+
+        <LabelValue
+          reverse
+          value={labelValue}
+          label={`${
+            amount > 0
+              ? `${amount.toLocaleString('en-IN', {
+                  style: 'currency',
+                  currency: 'INR',
+                })}`
+              : 'NA'
+          }`}
+          labelsx={{
+            fontSize: '14px',
+            color: 'white',
+            fontWeight: '600',
+          }}
+          valuesx={{
+            fontSize: '12px',
+            color: 'white',
+            fontWeight: '400',
+          }}
+          sx={{ gap: '4px' }}
+        />
+      </Box>
+      <StyledPayContainer
+        disabled={yearRestricted}
+        height={payButtonHeight}
+        onClick={() => handleClick(amount)}
+      >
+        <Typography
+          variant="subtitle1"
+          sx={{
+            color: 'white',
+            opacity: !yearRestricted ? 1 : 0.7,
+            fontWeight: '600',
+            padding: '12px',
+            cursor: !yearRestricted ? 'pointer' : 'initial',
+          }}
+        >
+          {amount > 0 ? 'Pay' : 'View'}
+        </Typography>
+      </StyledPayContainer>
+    </StyledYearCard>
+  )
+}
+export default FeeCard
+
+const StyledYearCard = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'disabled',
+})<{ isCardDue: boolean; height: string }>(({ theme, isCardDue, height }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  height: height ?? '170px',
+  alignItems: 'flex-start',
+  justifyContent: 'space-between',
+  backgroundImage: isCardDue
+    ? 'linear-gradient(102deg, #C02633 0%, #A23B39 100%)'
+    : 'linear-gradient(102deg, #0093E9 0%, #0841AC 100%)',
+  borderRadius: '10px',
+  transition: 'background 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+  boxShadow: '0px 2px 10px #0000000F',
+  '& .MuiTypography-subtitle2': {
+    color: 'white',
+    opacity: 0.9,
+  },
+}))
+
+const StyledPayContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'disabled',
+})<{ disabled: boolean; height: string }>(({ theme, disabled, height }) => ({
+  width: '100%',
+  height: height,
+  backgroundColor: disabled ? '#333333' : '#121212',
+  borderRadius: '0px 0px 10px 10px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}))

package/src/components/LabelValue.tsx

@@ -1,19 +1,32 @@
-import { Box, Stack, Typography } from '@mui/material'
+import { Stack, Theme, Typography } from '@mui/material'
+import { SxProps } from '@mui/system'
 import { ReactNode } from 'react'
 
 export default function LabelValue({
   label,
   value,
   reverse = false,
+  labelsx,
+  valuesx,
+  sx,
 }: {
   label: string | ReactNode
   value?: ReactNode
   reverse?: boolean
+  labelsx?: SxProps<Theme>
+  valuesx?: SxProps<Theme>
+  sx?: SxProps<Theme>
 }) {
   return (
-    <Stack flexDirection={reverse ? 'column-reverse' : 'column'} gap="6px">
-      <Typography variant="subtitle2">{label}</Typography>
-      <Typography paragraph fontWeight={600}>
+    <Stack
+      flexDirection={reverse ? 'column-reverse' : 'column'}
+      gap="6px"
+      sx={sx}
+    >
+      <Typography variant="subtitle2" sx={labelsx}>
+        {label}
+      </Typography>
+      <Typography paragraph fontWeight={600} sx={valuesx}>
         {value ?? '-'}
       </Typography>
     </Stack>

package/src/components/Stepper.tsx

@@ -0,0 +1,117 @@
+import Check from '@mui/icons-material/Check'
+import { StepContent } from '@mui/material'
+import Stack from '@mui/material/Stack'
+import Step from '@mui/material/Step'
+import StepConnector, {
+  stepConnectorClasses,
+} from '@mui/material/StepConnector'
+import { StepIconProps } from '@mui/material/StepIcon'
+import StepLabel from '@mui/material/StepLabel'
+import Stepper from '@mui/material/Stepper'
+import { styled } from '@mui/material/styles'
+
+const QontoConnector = styled(StepConnector)(({ theme }) => ({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: {
+    top: 10,
+    left: 'calc(-50% + 16px)',
+    right: 'calc(50% + 16px)',
+  },
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: '#2975D0',
+    },
+  },
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: '#2975D0',
+    },
+  },
+  [`& .${stepConnectorClasses.line}`]: {
+    borderColor: '#d1d1d2',
+    borderTopWidth: 1,
+    borderRadius: 1,
+  },
+}))
+
+const ColorlibStepIconRoot = styled('div')<{
+  ownerState: { completed?: boolean; active?: boolean }
+}>(({ theme, ownerState }) => ({
+  zIndex: 1,
+  color: '#fff',
+  width: 25,
+  height: 25,
+  display: 'flex',
+  borderRadius: '50%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  border: '1px solid #12121234',
+  ...(ownerState.active && {
+    boxShadow: '0px 3px 25px #303E6334',
+    border: 'none',
+    '& .QontoStepIcon-circle': {
+      height: '10px',
+      width: '10px',
+      borderRadius: '50%',
+      background:
+        'transparent linear-gradient(180deg, #2522AF 0%, #2976D0 100%)',
+    },
+  }),
+  ...(ownerState.completed && {
+    background: 'transparent linear-gradient(180deg, #2522AF 0%, #2976D0 100%)',
+    '& .QontoStepIcon-completedIcon': {
+      height: '15px',
+      width: '15px',
+    },
+  }),
+}))
+
+function ColorlibStepIcon(props: StepIconProps) {
+  const { active, completed, className } = props
+
+  return (
+    <ColorlibStepIconRoot
+      ownerState={{ completed, active }}
+      className={className}
+    >
+      {completed ? (
+        <Check className="QontoStepIcon-completedIcon" />
+      ) : (
+        <div className="QontoStepIcon-circle" />
+      )}
+    </ColorlibStepIconRoot>
+  )
+}
+
+export default function PaymentStepper({ steps, active }) {
+  return (
+    <Stack
+      sx={{
+        width: '100%',
+      }}
+    >
+      <Stepper
+        activeStep={active}
+        connector={<QontoConnector />}
+        sx={{
+          '& .MuiStep-root': {
+            padding: '0px',
+          },
+          '& .MuiStepLabel-root': {
+            display: 'flex',
+            flexDirection: 'column',
+          },
+          '& .MuiStep-root span': {
+            padding: '0px',
+          },
+        }}
+      >
+        {steps.map((item, index) => (
+          <Step key={item.label}>
+            <StepLabel StepIconComponent={ColorlibStepIcon}></StepLabel>
+            <StepContent>{item.component} </StepContent>
+          </Step>
+        ))}
+      </Stepper>
+    </Stack>
+  )
+}

package/src/components/Tables/BasicTable/Table.tsx

@@ -1,27 +1,29 @@
 import {
-  Box,
   IconButton,
   ListItemIcon,
-  Table as MuiTable,
   TableBody,
-  TableCell,
-  TableContainer,
   TableHead,
   TableRow,
-  alpha,
-  styled,
+  Theme,
 } from '@mui/material'
+import { SxProps } from '@mui/system'
 import _ from 'lodash'
 import { useEffect, useState } from 'react'
 import Spinner from '../../Spinner'
 import NoRecordsFound from '../common/NoRecordsFound'
 import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
 import TableFooter from './TableFooter'
+import {
+  StyledMuiTable,
+  StyledTableCell,
+  StyledTableContainer,
+  StyledTableRow,
+} from './styles'
 
 type Order = 'asc' | 'desc' | ''
 type Sort = {}
 type DataType = 'currency' | 'string' | 'number'
-export interface ColumnProps {
+export interface TableColumn {
   dataIndex: string
   key: string
   title: any
@@ -32,7 +34,7 @@ export interface ColumnProps {
   dataType?: DataType
 }
 interface TableProps {
-  columns: Array<ColumnProps>
+  columns: Array<TableColumn>
   rowKey?: string
   dataSource?: any[]
   loading?: boolean
@@ -47,7 +49,9 @@ interface TableProps {
   onSort?: (sort: any) => void
   dense?: boolean
   showTotal?: boolean
-  isMobile?: boolean
+  sx?: Record<string, SxProps<Theme>>
+  totalColumns?: number[]
+  showTotalInFirstCellOfTotalRow?: boolean
 }
 export default function Table({
   columns,
@@ -58,10 +62,18 @@ export default function Table({
   onSort,
   dense = false,
   showTotal = false,
-  isMobile = false,
+  sx,
+  totalColumns,
+  showTotalInFirstCellOfTotalRow,
 }: TableProps) {
   const [sort, setSort] = useState<Sort>({})
   let totalCount = []
+  let totalCols = []
+  if (showTotalInFirstCellOfTotalRow) {
+    totalCols = totalColumns ? [...totalColumns, 1] : [1]
+  } else {
+    totalCols = totalColumns ? [...totalColumns] : []
+  }
 
   const handleSortClick = (sortBykey) => {
     setSort((prev) => {
@@ -101,7 +113,7 @@ export default function Table({
         totalCount[colIndex] = 0
       }
 
-      if (colIndex === 0) {
+      if (showTotalInFirstCellOfTotalRow && colIndex === 0) {
         totalCount[colIndex] = 'Total'
         return
       }
@@ -118,22 +130,23 @@ export default function Table({
   }
 
   return (
-    <StyledTableContainer isMobile={isMobile}>
+    <StyledTableContainer sx={sx}>
       <>
-        <StyledMuiTable isMobile={isMobile}>
+        <StyledMuiTable sx={sx}>
           <TableHead>
             <TableRow>
-              {columns.map((col, index) => (
+              {columns.map((col, columnIndex) => (
                 <StyledTableCell
-                  key={index}
-                  isMobile={isMobile}
+                  key={columnIndex}
                   columnsLength={columns.length}
-                  index={index}
+                  columnIndex={columnIndex + 1}
+                  rowIndex={0}
                   col={col}
+                  sx={sx}
+                  isHeaderCell
                 >
-                  <Box sx={{ fontWeight: 600, fontSize: '14px' }}>
-                    {col.title}
-                  </Box>
+                  {col.title}
+
                   {col.sort && (
                     <IconButton onClick={() => handleSortClick(col.dataIndex)}>
                       <ListItemIcon>
@@ -168,16 +181,12 @@ export default function Table({
                       {columns.map((col, colIndex) => (
                         <StyledTableCell
                           key={colIndex}
-                          isMobile={isMobile}
                           columnsLength={columns.length}
-                          index={colIndex}
+                          columnIndex={colIndex + 1}
+                          rowIndex={rowIndex + 1}
                           col={col}
-                          sx={{
-                            color: col.textColor,
-                            padding: dense ? '10px' : '15px',
-                            font: 'avenir',
-                            fontSize: '14px',
-                          }}
+                          isBodyCell
+                          sx={sx}
                         >
                           {col?.dataType && col?.dataType == 'currency' ? (
                             <>{convertToAmount(row[col.dataIndex])}</>
@@ -199,22 +208,21 @@ export default function Table({
                         <>
                           <StyledTableCell
                             key={colIndex}
-                            isMobile={isMobile}
                             columnsLength={columns.length}
-                            index={colIndex}
+                            columnIndex={colIndex + 1}
+                            rowIndex={dataSource.length + 1}
                             col={col}
-                            sx={{
-                              color: col.textColor,
-                              padding: dense ? '10px' : '15px',
-                              font: 'avenir',
-                              fontSize: '14px',
-                              fontWeight: '600',
-                            }}
+                            isBodyCell
+                            sx={sx}
                           >
-                            {col?.dataType && col?.dataType == 'currency' ? (
-                              <>{convertToAmount(totalCount[colIndex])}</>
+                            {totalCols.includes(colIndex + 1) ? (
+                              col?.dataType && col?.dataType == 'currency' ? (
+                                <>{convertToAmount(totalCount[colIndex])}</>
+                              ) : (
+                                <>{totalCount[colIndex]}</>
+                              )
                             ) : (
-                              <>{totalCount[colIndex]}</>
+                              '---'
                             )}
                           </StyledTableCell>
                         </>
@@ -247,45 +255,3 @@ export default function Table({
     </StyledTableContainer>
   )
 }
-
-const StyledTableContainer = styled(TableContainer)<{ isMobile: boolean }>(
-  ({ theme, isMobile }) => ({
-    width: '100%',
-    overflowX: 'auto',
-    borderRadius: isMobile ? '10px 10px 10px 10px' : 'none',
-    border: isMobile ? '1px solid #1212121A' : 'none',
-  }),
-)
-
-const StyledTableCell = styled(TableCell)<{
-  isMobile: boolean
-  columnsLength: number
-  index: number
-  col: any
-  sx?: any
-}>(({ theme, isMobile, columnsLength, index, col, sx }) => ({
-  ...(col?.width && {
-    width: col?.width,
-  }),
-  borderRightColor:
-    isMobile && columnsLength - 1 !== index ? '#1212121A' : 'none',
-  borderRightStyle: isMobile && columnsLength - 1 !== index ? 'solid' : 'none',
-  ...sx,
-}))
-
-const StyledMuiTable = styled(MuiTable)<{ isMobile: boolean }>(
-  ({ theme, isMobile }) => ({
-    border: isMobile ? 'none' : '1px solid #1212121A',
-  }),
-)
-
-const StyledTableRow = styled(TableRow, {
-  shouldForwardProp: (prop) => prop !== 'canRowClick',
-})<{ canRowClick: boolean }>(({ canRowClick }) => ({
-  ...(canRowClick && {
-    cursor: 'pointer',
-    '&.MuiTableRow-hover:hover': {
-      backgroundColor: alpha('#f2f2f2', 0.4),
-    },
-  }),
-}))

package/src/components/Tables/BasicTable/interface.ts

@@ -0,0 +1,19 @@
+import { Theme } from '@mui/material'
+import { SxProps } from '@mui/system'
+
+export interface StyledCellProps {
+  columnsLength: number
+  columnIndex: number
+  rowIndex: number
+  col: any
+  sx?: Record<string, SxProps<Theme>>
+  isBodyCell?: boolean
+  isHeaderCell?: boolean
+}
+export interface StyledTableContainerProps {
+  sx?: Record<string, SxProps<Theme>>
+}
+
+export interface StyledMuiTableProps {
+  sx?: Record<string, SxProps<Theme>>
+}

package/src/components/Tables/BasicTable/styles.ts

@@ -0,0 +1,105 @@
+import styled, { CSSObject } from '@emotion/styled'
+import {
+  Table,
+  TableCell,
+  TableContainer,
+  TableRow,
+  Theme,
+  alpha,
+} from '@mui/material'
+import { SxProps } from '@mui/system'
+import _ from 'lodash'
+import {
+  StyledCellProps,
+  StyledMuiTableProps,
+  StyledTableContainerProps,
+} from './interface'
+
+export const StyledTableCell = styled(TableCell)<StyledCellProps>(
+  ({
+    theme,
+    columnsLength,
+    columnIndex,
+    rowIndex,
+    col,
+    sx,
+    isBodyCell = false,
+    isHeaderCell = false,
+  }) => {
+    const { rowkey, columnKey, cellKey, allKey } = getSxKeys(
+      rowIndex,
+      columnIndex,
+    )
+    const rowSx: SxProps<Theme> = _.get(sx, rowkey)
+    const columnSx: SxProps<Theme> = _.get(sx, columnKey)
+    const cellSx: SxProps<Theme> = _.get(sx, cellKey)
+    const allSx: SxProps<Theme> = _.get(sx, allKey)
+    return {
+      ...(col?.width && {
+        width: col?.width,
+      }),
+      ['@media(max-width: 680px)']: {
+        borderRightColor:
+          columnsLength - 1 !== columnIndex ? '#1212121A' : 'none',
+        borderRightStyle: columnsLength - 1 !== columnIndex ? 'solid' : 'none',
+      },
+
+      ...(isBodyCell && {
+        color: col.textColor,
+        padding: '15px',
+        font: 'avenir',
+        fontSize: '14px',
+      }),
+      ...(isHeaderCell && {
+        fontWeight: 600,
+        fontSize: '14px',
+      }),
+
+      ...columnSx,
+      ...rowSx,
+      ...cellSx,
+      ...allSx,
+    } as CSSObject
+  },
+)
+
+export const StyledMuiTable = styled(Table)<StyledMuiTableProps>(
+  ({ theme, sx }) => {
+    const containerSx: SxProps<Theme> = _.get(sx, 'MuiTable')
+    return {
+      ...containerSx,
+    } as CSSObject
+  },
+)
+
+export const StyledTableRow = styled(TableRow, {
+  shouldForwardProp: (prop) => prop !== 'canRowClick',
+})<{ canRowClick: boolean }>(({ canRowClick }) => ({
+  ...(canRowClick && {
+    cursor: 'pointer',
+    '&.MuiTableRow-hover:hover': {
+      backgroundColor: alpha('#f2f2f2', 0.4),
+    },
+  }),
+}))
+
+export const StyledTableContainer = styled(
+  TableContainer,
+)<StyledTableContainerProps>(({ theme, sx }) => {
+  const containerSx: SxProps<Theme> = _.get(sx, 'TableContainer')
+
+  return {
+    width: '100%',
+    overflowX: 'auto',
+    ...containerSx,
+  } as CSSObject
+})
+
+const getSxKeys = (rowIndex, columnIndex) => {
+  return {
+    rowkey: `row:${rowIndex}`,
+    columnKey: `column:${columnIndex}`,
+    cellKey: `row:${rowIndex},column:${columnIndex}`,
+    allKey: 'Tablecell',
+  }
+}

package/src/components/Tabs/TabsContainer.tsx

@@ -13,7 +13,6 @@ export interface TabsContainerProps {
   size?: 'small' | 'medium'
   containerVariant?: 'box' | 'page'
   onTabChange?: (tabKey: string) => void
-  isMobile?: boolean
   tabUnderlineColor?: string
   tabMobileUnderlineColor?: string
 }
@@ -22,7 +21,6 @@ export default function TabsContainer({
   tabs,
   size = 'small',
   containerVariant = 'box',
-  isMobile = false,
   onTabChange,
   tabUnderlineColor,
   tabMobileUnderlineColor,
@@ -48,7 +46,6 @@ export default function TabsContainer({
         scrollButtons="auto"
         textColor="primary"
         indicatorColor="primary"
-        isMobile={isMobile}
         underlineColor={tabUnderlineColor}
         mobileUnderlineColor={tabMobileUnderlineColor}
       >

package/src/components/Tabs/styles.tsx

@@ -3,7 +3,6 @@ import { Box, Stack, styled, Tabs } from '@mui/material'
 interface StyledTabsProps {
   size: 'small' | 'medium'
   containerVariant?: 'page' | 'box'
-  isMobile?: false | true
   underlineColor?: string
   mobileUnderlineColor?: string
 }
@@ -13,19 +12,22 @@ export const StyledTabs = styled(Tabs)<StyledTabsProps>(
     theme,
     size,
     containerVariant,
-    isMobile,
     underlineColor,
     mobileUnderlineColor,
   }) => ({
     borderTopRightRadius: '10px',
     borderTopLeftRadius: '10px',
     background: theme.palette.secondary.light,
-    minHeight: isMobile ? '30px' : '60px',
+    minHeight: '60px',
+    ['@media(max-width: 680px)']: {
+      minHeight: '30px',
+    },
     paddingLeft: '15px',
     '& .MuiTabs-indicator': {
-      backgroundColor: isMobile
-        ? mobileUnderlineColor
-        : underlineColor ?? theme.palette.common.yellow,
+      backgroundColor: underlineColor ?? theme.palette.common.yellow,
+      ['@media(max-width: 680px)']: {
+        backgroundColor: mobileUnderlineColor,
+      },
     },
     '& span': {
       color: theme.palette.error.main,
@@ -36,7 +38,10 @@ export const StyledTabs = styled(Tabs)<StyledTabsProps>(
     '& .MuiTabs-flexContainer': {
       height: '100%',
       alignItems: 'end',
-      justifyContent: isMobile ? 'center' : 'flex-start',
+      justifyContent: 'flex-start',
+      ['@media(max-width: 680px)']: {
+        justifyContent: 'center',
+      },
     },
     '& .MuiTab-root': {
       textTransform: 'none',
@@ -45,7 +50,10 @@ export const StyledTabs = styled(Tabs)<StyledTabsProps>(
       paddingBottom: '8px',
       minHeight: 0,
       fontSize: size === 'medium' ? '16px' : '14px',
-      fontWeight: isMobile ? '500' : '600',
+      fontWeight: '600',
+      ['@media(max-width: 680px)']: {
+        fontWeight: '500',
+      },
     },
     '& .MuiTab-root.Mui-selected': {
       color: theme.palette.secondary.main,

package/src/components/index.ts

@@ -46,6 +46,7 @@ export { default as Card } from './Card'
 export { default as CardsGrid } from './CardsGrid'
 export { default as DividerHeading } from './DividerHeading'
 export { default as DropDownButton } from './DropDownButton'
+export { default as FeeCard } from './FeeCard'
 export { default as Image } from './Image'
 export { default as JsonPreview } from './JsonPreview'
 export { default as LabelValue } from './LabelValue'
@@ -57,6 +58,7 @@ export { default as PageHeader } from './PageHeader'
 export { default as useConfirm } from './PopupConfirm/useConfirm'
 export { default as ReportPageHeader } from './ReportPageHeader'
 export { default as Spinner } from './Spinner'
+export { default as PaymentStepper } from './Stepper'
 export { default as SwitchButton } from './SwitchButton'
 export { default as Table } from './Tables/BasicTable'
 export { default as TableFooter } from './Tables/BasicTable/TableFooter'