diff --git a/apps/material-react-table-docs/components/mdx/SourceCodeSnippet.tsx b/apps/material-react-table-docs/components/mdx/SourceCodeSnippet.tsx
index 854c30851..ea7440c37 100644
--- a/apps/material-react-table-docs/components/mdx/SourceCodeSnippet.tsx
+++ b/apps/material-react-table-docs/components/mdx/SourceCodeSnippet.tsx
@@ -237,6 +237,7 @@ export const SourceCodeSnippet = ({
                     variant="standard"
                   />
                   <Select
+                    MenuProps={{ disableScrollLock: true }}
                     value={isLightTheme ? 'light' : 'dark'}
                     onChange={(e) => {
                       setIsLightTheme(e.target.value === 'light');
diff --git a/apps/material-react-table-docs/components/navigation/TopBar.tsx b/apps/material-react-table-docs/components/navigation/TopBar.tsx
index 8afc9b9a0..3dbe9e8fc 100644
--- a/apps/material-react-table-docs/components/navigation/TopBar.tsx
+++ b/apps/material-react-table-docs/components/navigation/TopBar.tsx
@@ -153,6 +153,7 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => {
             >
               <Select
                 onOpen={() => plausible('version-select')}
+                MenuProps={{ disableScrollLock: true }}
                 value="v2"
                 size="small"
                 sx={{ m: '8px', height: '30px' }}
diff --git a/apps/material-react-table-docs/pages/docs/guides/data-columns.mdx b/apps/material-react-table-docs/pages/docs/guides/data-columns.mdx
index 177881e6c..002f30bf1 100644
--- a/apps/material-react-table-docs/pages/docs/guides/data-columns.mdx
+++ b/apps/material-react-table-docs/pages/docs/guides/data-columns.mdx
@@ -248,24 +248,30 @@ const columns = [
   {
     accessorKey: 'id',
     header: 'ID',
-    //right align the header and body cells
+    //right align the header, body, and footer cells each individually
     muiTableHeadCellProps: {
       align: 'right',
     },
     muiTableBodyCellProps: {
       align: 'right',
     },
+    muiTableFooterCellProps: {
+      align: 'right',
+    },
   },
   {
     accessorKey: 'username',
     header: 'Username',
-    //center align the header and body cells
+    //center align the header, body, and footer cells each individually
     muiTableHeadCellProps: {
       align: 'center',
     },
     muiTableBodyCellProps: {
       align: 'center',
     },
+    muiTableFooterCellProps: {
+      align: 'center',
+    },
   },
 ];
 ```
diff --git a/apps/material-react-table-docs/styles/globals.css b/apps/material-react-table-docs/styles/globals.css
index c19e1dc04..e0cf54002 100644
--- a/apps/material-react-table-docs/styles/globals.css
+++ b/apps/material-react-table-docs/styles/globals.css
@@ -1,16 +1,26 @@
-html,
 body {
   background-color: #111;
   padding: 0;
   margin: 0;
-  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family:
+    'Open Sans',
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
   scroll-behavior: smooth;
   scroll-padding-top: 5rem;
   overflow-y: overlay;
   overflow-x: hidden;
 }
- 
+
 a {
   color: inherit;
   text-decoration: none;
@@ -26,13 +36,13 @@ a {
 
 ::-webkit-scrollbar {
   right: 0;
-  width: 12px;
-  height: 12px;
+  width: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
   background-color: #999;
   border-radius: 8px;
-  width: 12px;
-  height: 12px;
+  width: 10px;
+  height: 10px;
 }
diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json
index 0acf1a0f9..bee9e9aca 100644
--- a/packages/material-react-table/package.json
+++ b/packages/material-react-table/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.9.1",
+  "version": "2.9.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
diff --git a/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx b/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx
index c4c4139f7..f3efc1640 100644
--- a/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx
+++ b/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx
@@ -241,9 +241,6 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
         alignItems: layoutMode?.startsWith('grid') ? 'center' : undefined,
         cursor:
           isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit',
-        justifyContent: layoutMode?.startsWith('grid')
-          ? tableCellProps.align
-          : undefined,
         overflow: 'hidden',
         p:
           density === 'compact'
@@ -260,8 +257,6 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
         textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
         whiteSpace:
           row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal',
-        zIndex:
-          draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
         ...getCommonMRTCellStyles({
           column,
           table,
diff --git a/packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx b/packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx
index f9423e6a1..177de5768 100644
--- a/packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx
+++ b/packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx
@@ -21,9 +21,9 @@ import {
 } from '../../types';
 import { getIsRowSelected } from '../../utils/row.utils';
 import {
+  commonCellBeforeAfterStyles,
   getCommonPinnedCellStyles,
   getMRTTheme,
-  pinnedBeforeAfterStyles,
 } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
@@ -176,13 +176,11 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
           ...tableRowProps?.style,
         }}
         sx={(theme: Theme) => ({
-          '&:hover td': {
-            '&:after': {
-              backgroundColor: cellHighlightColorHover
-                ? alpha(cellHighlightColorHover, 0.3)
-                : undefined,
-              ...pinnedBeforeAfterStyles,
-            },
+          '&:hover td:after': {
+            backgroundColor: cellHighlightColorHover
+              ? alpha(cellHighlightColorHover, 0.3)
+              : undefined,
+            ...commonCellBeforeAfterStyles,
           },
           backgroundColor: `${baseBackgroundColor} !important`,
           bottom:
@@ -199,11 +197,11 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
             ? 'absolute'
             : rowPinningDisplayMode?.includes('sticky') && isRowPinned
               ? 'sticky'
-              : undefined,
+              : 'relative',
           td: {
             '&:after': {
               backgroundColor: cellHighlightColor,
-              ...pinnedBeforeAfterStyles,
+              ...commonCellBeforeAfterStyles,
             },
             ...getCommonPinnedCellStyles({ table, theme }),
           },
@@ -218,9 +216,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
           transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
           width: '100%',
           zIndex:
-            rowPinningDisplayMode?.includes('sticky') && isRowPinned
-              ? 2
-              : undefined,
+            rowPinningDisplayMode?.includes('sticky') && isRowPinned ? 2 : 0,
           ...(sx as any),
         })}
       >
diff --git a/packages/material-react-table/src/components/footer/MRT_TableFooterCell.tsx b/packages/material-react-table/src/components/footer/MRT_TableFooterCell.tsx
index 6b724565b..24025242f 100644
--- a/packages/material-react-table/src/components/footer/MRT_TableFooterCell.tsx
+++ b/packages/material-react-table/src/components/footer/MRT_TableFooterCell.tsx
@@ -23,7 +23,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   const theme = useTheme();
   const {
     getState,
-    options: { enableColumnPinning, layoutMode, muiTableFooterCellProps },
+    options: { enableColumnPinning, muiTableFooterCellProps },
   } = table;
   const { density } = getState();
   const { column } = footer;
@@ -57,9 +57,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
       variant="footer"
       {...tableCellProps}
       sx={(theme) => ({
-        display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
         fontWeight: 'bold',
-        justifyContent: columnDefType === 'group' ? 'center' : undefined,
         p:
           density === 'compact'
             ? '0.5rem'
@@ -67,9 +65,9 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
               ? '1rem'
               : '1.5rem',
         verticalAlign: 'top',
-        zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1,
         ...getCommonMRTCellStyles({
           column,
+          header: footer,
           table,
           tableCellProps,
           theme,
diff --git a/packages/material-react-table/src/components/head/MRT_TableHeadCell.tsx b/packages/material-react-table/src/components/head/MRT_TableHeadCell.tsx
index 59be671d9..a5abacb78 100644
--- a/packages/material-react-table/src/components/head/MRT_TableHeadCell.tsx
+++ b/packages/material-react-table/src/components/head/MRT_TableHeadCell.tsx
@@ -197,12 +197,6 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
               : '1.25rem',
         userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
         verticalAlign: 'top',
-        zIndex:
-          column.getIsResizing() || draggingColumn?.id === column.id
-            ? 3
-            : column.getIsPinned() && columnDefType !== 'group'
-              ? 2
-              : 1,
         ...getCommonMRTCellStyles({
           column,
           header,
diff --git a/packages/material-react-table/src/components/head/MRT_TableHeadRow.tsx b/packages/material-react-table/src/components/head/MRT_TableHeadRow.tsx
index 36ac09479..7d477c8a4 100644
--- a/packages/material-react-table/src/components/head/MRT_TableHeadRow.tsx
+++ b/packages/material-react-table/src/components/head/MRT_TableHeadRow.tsx
@@ -25,7 +25,7 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
   ...rest
 }: Props<TData>) => {
   const {
-    options: { layoutMode, muiTableHeadRowProps },
+    options: { enableStickyHeader, layoutMode, muiTableHeadRowProps },
   } = table;
 
   const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
@@ -46,6 +46,10 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
         backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
         boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+        position:
+          enableStickyHeader && layoutMode === 'semantic'
+            ? 'sticky'
+            : 'relative',
         top: 0,
         ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}
diff --git a/packages/material-react-table/src/components/inputs/MRT_EditCellTextField.tsx b/packages/material-react-table/src/components/inputs/MRT_EditCellTextField.tsx
index 25af122ad..1773f4c48 100644
--- a/packages/material-react-table/src/components/inputs/MRT_EditCellTextField.tsx
+++ b/packages/material-react-table/src/components/inputs/MRT_EditCellTextField.tsx
@@ -148,8 +148,11 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
           ) as any),
         }),
       }}
+      SelectProps={{
+        MenuProps: { disableScrollLock: true },
+      }}
       inputProps={{
-        autoComplete: 'new-password', // disable autocomplete and autofill
+        autoComplete: 'new-password', //disable autocomplete and autofill
         ...textFieldProps.inputProps,
       }}
       onBlur={handleBlur}
diff --git a/packages/material-react-table/src/components/inputs/MRT_FilterTextField.tsx b/packages/material-react-table/src/components/inputs/MRT_FilterTextField.tsx
index a773cf75b..72663233d 100644
--- a/packages/material-react-table/src/components/inputs/MRT_FilterTextField.tsx
+++ b/packages/material-react-table/src/components/inputs/MRT_FilterTextField.tsx
@@ -468,6 +468,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
           select={isSelectFilter || isMultiSelectFilter}
           {...commonTextFieldProps}
           SelectProps={{
+            MenuProps: { disableScrollLock: true },
             displayEmpty: true,
             multiple: isMultiSelectFilter,
             renderValue: isMultiSelectFilter
diff --git a/packages/material-react-table/src/components/menus/MRT_ColumnActionMenu.tsx b/packages/material-react-table/src/components/menus/MRT_ColumnActionMenu.tsx
index 9e9a47f42..fbb2b9578 100644
--- a/packages/material-react-table/src/components/menus/MRT_ColumnActionMenu.tsx
+++ b/packages/material-react-table/src/components/menus/MRT_ColumnActionMenu.tsx
@@ -410,6 +410,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
         },
       }}
       anchorEl={anchorEl}
+      disableScrollLock
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
       {...rest}
diff --git a/packages/material-react-table/src/components/menus/MRT_FilterOptionMenu.tsx b/packages/material-react-table/src/components/menus/MRT_FilterOptionMenu.tsx
index 0fea235c9..c0e503517 100644
--- a/packages/material-react-table/src/components/menus/MRT_FilterOptionMenu.tsx
+++ b/packages/material-react-table/src/components/menus/MRT_FilterOptionMenu.tsx
@@ -252,6 +252,7 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
       }}
       anchorEl={anchorEl}
       anchorOrigin={{ horizontal: 'right', vertical: 'center' }}
+      disableScrollLock
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
       {...rest}
diff --git a/packages/material-react-table/src/components/menus/MRT_RowActionMenu.tsx b/packages/material-react-table/src/components/menus/MRT_RowActionMenu.tsx
index 8c7fc3afc..56280d7a7 100644
--- a/packages/material-react-table/src/components/menus/MRT_RowActionMenu.tsx
+++ b/packages/material-react-table/src/components/menus/MRT_RowActionMenu.tsx
@@ -58,6 +58,7 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
         },
       }}
       anchorEl={anchorEl}
+      disableScrollLock
       onClick={(event) => event.stopPropagation()}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
diff --git a/packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx b/packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx
index 1b281aa50..5afeeabbe 100644
--- a/packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx
+++ b/packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx
@@ -91,6 +91,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
         },
       }}
       anchorEl={anchorEl}
+      disableScrollLock
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
       {...rest}
diff --git a/packages/material-react-table/src/components/table/MRT_Table.tsx b/packages/material-react-table/src/components/table/MRT_Table.tsx
index 7b9593802..5a8695c7b 100644
--- a/packages/material-react-table/src/components/table/MRT_Table.tsx
+++ b/packages/material-react-table/src/components/table/MRT_Table.tsx
@@ -67,6 +67,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
       sx={(theme) => ({
         borderCollapse: 'separate',
         display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+        position: 'relative',
         ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
       })}
     >
diff --git a/packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx b/packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx
index 16b8f367f..085a1983d 100644
--- a/packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx
+++ b/packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx
@@ -8,6 +8,7 @@ import Select, { type SelectProps } from '@mui/material/Select';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { flipIconStyles, getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
@@ -33,6 +34,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
   ...rest
 }: Props<TData>) => {
   const theme = useTheme();
+  const isMobile = useMediaQuery('(max-width: 720px)');
 
   const {
     getPrePaginationRowModel,
@@ -67,18 +69,22 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
   const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
 
   const {
-    SelectProps,
+    SelectProps = {},
     disabled = false,
     rowsPerPageOptions = defaultRowsPerPage,
     showFirstButton = showFirstLastPageButtons,
     showLastButton = showFirstLastPageButtons,
     showRowsPerPage = true,
-    ..._rest
+    ...restPaginationProps
   } = paginationProps ?? {};
 
   const disableBack = pageIndex <= 0 || disabled;
   const disableNext = lastRowIndex >= totalRowCount || disabled;
 
+  if (isMobile && SelectProps?.native !== false) {
+    SelectProps.native = true;
+  }
+
   const tooltipProps = getCommonTooltipProps();
 
   return (
@@ -109,10 +115,13 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
             {localization.rowsPerPage}
           </InputLabel>
           <Select
+            MenuProps={{ disableScrollLock: true }}
             disableUnderline
             disabled={disabled}
-            id="mrt-rows-per-page"
-            inputProps={{ 'aria-label': localization.rowsPerPage }}
+            inputProps={{
+              'aria-label': localization.rowsPerPage,
+              id: 'mrt-rows-per-page',
+            }}
             label={localization.rowsPerPage}
             onChange={(event) => setPageSize(+(event.target.value as any))}
             sx={{ mb: 0 }}
@@ -159,7 +168,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
           )}
           showFirstButton={showFirstButton}
           showLastButton={showLastButton}
-          {..._rest}
+          {...restPaginationProps}
         />
       ) : paginationDisplayMode === 'default' ? (
         <>
diff --git a/packages/material-react-table/src/utils/style.utils.ts b/packages/material-react-table/src/utils/style.utils.ts
index b9032fa65..63ab370ff 100644
--- a/packages/material-react-table/src/utils/style.utils.ts
+++ b/packages/material-react-table/src/utils/style.utils.ts
@@ -42,7 +42,7 @@ export const getMRTTheme = <TData extends MRT_RowData>(
   };
 };
 
-export const pinnedBeforeAfterStyles = {
+export const commonCellBeforeAfterStyles = {
   content: '""',
   height: '100%',
   left: 0,
@@ -79,7 +79,7 @@ export const getCommonPinnedCellStyles = <TData extends MRT_RowData>({
               ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
               : undefined
           : undefined,
-        ...pinnedBeforeAfterStyles,
+        ...commonCellBeforeAfterStyles,
       },
     },
   };
@@ -99,9 +99,12 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
   theme: Theme;
 }) => {
   const {
+    getState,
     options: { enableColumnVirtualization, layoutMode },
   } = table;
+  const { draggingColumn } = getState();
   const { columnDef } = column;
+  const { columnDefType } = columnDef;
 
   const isColumnPinned =
     columnDef.columnDefType !== 'group' && column.getIsPinned();
@@ -140,7 +143,6 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
           isColumnPinned === 'right'
             ? `${getTotalRight(table, column)}px`
             : undefined,
-        zIndex: 1,
       }
     : {};
 
@@ -148,6 +150,12 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
     backgroundColor: 'inherit',
     backgroundImage: 'inherit',
     display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+    justifyContent:
+      columnDefType === 'group'
+        ? 'center'
+        : layoutMode?.startsWith('grid')
+          ? tableCellProps.align
+          : undefined,
     opacity:
       table.getState().draggingColumn?.id === column.id ||
       table.getState().hoveredColumn?.id === column.id
@@ -157,7 +165,12 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
     transition: enableColumnVirtualization
       ? 'none'
       : `padding 150ms ease-in-out`,
-    zIndex: 0,
+    zIndex:
+      column.getIsResizing() || draggingColumn?.id === column.id
+        ? 2
+        : columnDefType !== 'group' && isColumnPinned
+          ? 1
+          : 0,
     ...pinnedStyles,
     ...widthStyles,
     ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
diff --git a/packages/material-react-table/stories/styling/Alignment.stories.tsx b/packages/material-react-table/stories/styling/Alignment.stories.tsx
index 41b67f1ba..d10456fcd 100644
--- a/packages/material-react-table/stories/styling/Alignment.stories.tsx
+++ b/packages/material-react-table/stories/styling/Alignment.stories.tsx
@@ -11,26 +11,32 @@ export default meta;
 const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
   {
     accessorKey: 'firstName',
+    footer: 'First Name',
     header: 'First Name',
   },
   {
     accessorKey: 'lastName',
+    footer: 'Last Name',
     header: 'Last Name',
   },
   {
     accessorKey: 'age',
+    footer: 'Age',
     header: 'Age',
   },
   {
     accessorKey: 'address',
+    footer: 'Address',
     header: 'Address',
   },
   {
     accessorKey: 'state',
+    footer: 'State',
     header: 'State',
   },
   {
     accessorKey: 'phoneNumber',
+    footer: 'Phone Number',
     header: 'Phone Number',
   },
 ];
@@ -48,14 +54,37 @@ export const DefaultLeft = () => (
   <MaterialReactTable columns={columns} data={data} />
 );
 
+export const DefaultLeftGrid = () => (
+  <MaterialReactTable columns={columns} data={data} layoutMode="grid" />
+);
+
 export const RightCells = () => (
   <MaterialReactTable
     columns={columns}
     data={data}
-    enableColumnResizing
     muiTableBodyCellProps={{
       align: 'right',
     }}
+    muiTableFooterCellProps={{
+      align: 'right',
+    }}
+    muiTableHeadCellProps={{
+      align: 'right',
+    }}
+  />
+);
+
+export const RightCellsGrid = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    layoutMode="grid"
+    muiTableBodyCellProps={{
+      align: 'right',
+    }}
+    muiTableFooterCellProps={{
+      align: 'right',
+    }}
     muiTableHeadCellProps={{
       align: 'right',
     }}
@@ -69,6 +98,26 @@ export const CenterCells = () => (
     muiTableBodyCellProps={{
       align: 'center',
     }}
+    muiTableFooterCellProps={{
+      align: 'center',
+    }}
+    muiTableHeadCellProps={{
+      align: 'center',
+    }}
+  />
+);
+
+export const CenterCellsGrid = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    layoutMode="grid"
+    muiTableBodyCellProps={{
+      align: 'center',
+    }}
+    muiTableFooterCellProps={{
+      align: 'center',
+    }}
     muiTableHeadCellProps={{
       align: 'center',
     }}
@@ -83,6 +132,9 @@ export const CenterCellsWithGrabHandle = () => (
     muiTableBodyCellProps={{
       align: 'center',
     }}
+    muiTableFooterCellProps={{
+      align: 'center',
+    }}
     muiTableHeadCellProps={{
       align: 'center',
     }}
@@ -98,6 +150,9 @@ export const CenterCellsWithGrabHandleNoSorting = () => (
     muiTableBodyCellProps={{
       align: 'center',
     }}
+    muiTableFooterCellProps={{
+      align: 'center',
+    }}
     muiTableHeadCellProps={{
       align: 'center',
     }}
@@ -112,6 +167,9 @@ export const CenterCellsNoColumnActions = () => (
     muiTableBodyCellProps={{
       align: 'center',
     }}
+    muiTableFooterCellProps={{
+      align: 'center',
+    }}
     muiTableHeadCellProps={{
       align: 'center',
     }}
diff --git a/turbo.json b/turbo.json
index 057cf3231..61a8aff03 100644
--- a/turbo.json
+++ b/turbo.json
@@ -21,7 +21,6 @@
     "docs:build": {
       "cache": false,
       "outputs": [
-        "dist/**",
         "build/**"
       ]
     },
@@ -34,12 +33,6 @@
     "docs:start": {
       "cache": false
     },
-    "lib:build": {
-      "outputs": [
-        "dist/**",
-        "locales/**"
-      ]
-    },
     "lib:build-locales": {
       "outputs": [
         "locales/**"