diff --git a/src/DataTable/DataTable.tsx b/src/DataTable/DataTable.tsx
index 2ba1924d..c9c70440 100644
--- a/src/DataTable/DataTable.tsx
+++ b/src/DataTable/DataTable.tsx
@@ -1,37 +1,41 @@
 import * as React from 'react';
 import { ThemeProvider } from 'styled-components';
-import { tableReducer } from './tableReducer';
+import useColumns from '../hooks/useColumns';
+import useDidUpdateEffect from '../hooks/useDidUpdateEffect';
+import { CellBase } from './Cell';
+import NoData from './NoDataWrapper';
+import NativePagination from './Pagination';
+import ProgressWrapper from './ProgressWrapper';
+import ResponsiveWrapper from './ResponsiveWrapper';
 import Table from './Table';
-import Head from './TableHead';
-import HeadRow from './TableHeadRow';
-import Row from './TableRow';
+import Body from './TableBody';
 import Column from './TableCol';
 import ColumnCheckbox from './TableColCheckbox';
+import ColumnExpander from './TableColExpander';
+import Foot from './TableFoot';
+import FootRow from './TableFootRow';
+import TableFooterCell from './TableFooterCell';
+import Head from './TableHead';
+import HeadRow from './TableHeadRow';
 import Header from './TableHeader';
+import Row from './TableRow';
 import Subheader from './TableSubheader';
-import Body from './TableBody';
-import ResponsiveWrapper from './ResponsiveWrapper';
-import ProgressWrapper from './ProgressWrapper';
 import Wrapper from './TableWrapper';
-import ColumnExpander from './TableColExpander';
-import { CellBase } from './Cell';
-import NoData from './NoDataWrapper';
-import NativePagination from './Pagination';
-import useDidUpdateEffect from '../hooks/useDidUpdateEffect';
-import { prop, getNumberOfPages, sort, isEmpty, isRowSelected, recalculatePage } from './util';
 import { defaultProps } from './defaultProps';
 import { createStyles } from './styles';
+import { tableReducer } from './tableReducer';
 import {
 	Action,
 	AllRowsAction,
 	SingleRowAction,
-	TableRow,
 	SortAction,
+	SortOrder,
 	TableProps,
+	TableRow,
 	TableState,
-	SortOrder,
 } from './types';
-import useColumns from '../hooks/useColumns';
+import { getNumberOfPages, isEmpty, isRowSelected, prop, recalculatePage, sort } from './util';
+import { STOP_PROP_TAG } from './constants';
 
 function DataTable<T>(props: TableProps<T>): JSX.Element {
 	const {
@@ -81,6 +85,7 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 		noHeader = defaultProps.noHeader,
 		fixedHeader = defaultProps.fixedHeader,
 		fixedHeaderScrollHeight = defaultProps.fixedHeaderScrollHeight,
+		showFooter = defaultProps.showFooter,
 		pagination = defaultProps.pagination,
 		subHeader = defaultProps.subHeader,
 		subHeaderAlign = defaultProps.subHeaderAlign,
@@ -280,6 +285,14 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 		return false;
 	};
 
+	const showTableFoot = () => {
+		if (!showFooter) {
+			return false;
+		}
+
+		return sortedData.length > 0 && !progressPending;
+	};
+
 	// recalculate the pagination and currentPage if the rows length changes
 	if (pagination && !paginationServer && sortedData.length > 0 && tableRows.length === 0) {
 		const updatedPage = getNumberOfPages(sortedData.length, rowsPerPage);
@@ -489,6 +502,30 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 								})}
 							</Body>
 						)}
+
+						{showTableFoot() && (
+							<Foot className="rdt_TableFoot" role="rowgroup">
+								<FootRow className="rdt_TableFootRow" role="row" $dense={dense}>
+									{selectableRows && <CellBase style={{ flex: '0 0 48px' }} />}
+									{showFooter &&
+										tableColumns.map(column => (
+											<TableFooterCell<T>
+												id={column.id as string}
+												key={column.id}
+												dataTag={column.ignoreRowClick || column.button ? null : STOP_PROP_TAG}
+												column={column}
+												rows={tableRows}
+												isDragging={false}
+												onDragStart={handleDragStart}
+												onDragOver={handleDragOver}
+												onDragEnd={handleDragEnd}
+												onDragEnter={handleDragEnter}
+												onDragLeave={handleDragLeave}
+											/>
+										))}
+								</FootRow>
+							</Foot>
+						)}
 					</Table>
 				</Wrapper>
 			</ResponsiveWrapper>
diff --git a/src/DataTable/TableFoot.tsx b/src/DataTable/TableFoot.tsx
new file mode 100644
index 00000000..c7e7de71
--- /dev/null
+++ b/src/DataTable/TableFoot.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Foot = styled.div`
+	display: flex;
+	width: 100%;
+	${({ theme }) => theme.foot.style};
+`;
+
+export default Foot;
diff --git a/src/DataTable/TableFootRow.tsx b/src/DataTable/TableFootRow.tsx
new file mode 100644
index 00000000..a1d6dc95
--- /dev/null
+++ b/src/DataTable/TableFootRow.tsx
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const FootRow = styled.div<{
+	$dense?: boolean;
+}>`
+	display: flex;
+	align-items: stretch;
+	width: 100%;
+	${({ theme }) => theme.footRow.style};
+	${({ $dense, theme }) => $dense && theme.footRow.denseStyle};
+`;
+
+export default FootRow;
diff --git a/src/DataTable/TableFooterCell.tsx b/src/DataTable/TableFooterCell.tsx
new file mode 100644
index 00000000..84358496
--- /dev/null
+++ b/src/DataTable/TableFooterCell.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import styled, { css, CSSObject } from 'styled-components';
+import { CellExtended } from './Cell';
+import { getFooterProperty } from './util';
+import { TableColumn } from './types';
+
+interface FooterCellStyleProps {
+	$renderAsCell: boolean | undefined;
+	$wrapCell: boolean | undefined;
+	$allowOverflow: boolean | undefined;
+	$cellStyle: CSSObject | undefined;
+	$isDragging: boolean;
+}
+
+const overflowCSS = css<FooterCellStyleProps>`
+	div:first-child {
+		white-space: ${({ $wrapCell }) => ($wrapCell ? 'normal' : 'nowrap')};
+		overflow: ${({ $allowOverflow }) => ($allowOverflow ? 'visible' : 'hidden')};
+		text-overflow: ellipsis;
+	}
+`;
+
+const FooterCellStyle = styled(CellExtended).attrs(props => ({
+	style: props.style,
+}))<FooterCellStyleProps>`
+	${({ $renderAsCell }) => !$renderAsCell && overflowCSS};
+	${({ theme, $isDragging }) => $isDragging && theme.cells.draggingStyle};
+	${({ $cellStyle }) => $cellStyle};
+`;
+
+interface FooterCellProps<T> {
+	id: string;
+	dataTag: string | null;
+	column: TableColumn<T>;
+	rows: Array<T>;
+	isDragging: boolean;
+	onDragStart: (e: React.DragEvent<HTMLDivElement>) => void;
+	onDragOver: (e: React.DragEvent<HTMLDivElement>) => void;
+	onDragEnd: (e: React.DragEvent<HTMLDivElement>) => void;
+	onDragEnter: (e: React.DragEvent<HTMLDivElement>) => void;
+	onDragLeave: (e: React.DragEvent<HTMLDivElement>) => void;
+}
+
+function FooterCell<T>({
+	id,
+	column,
+	rows,
+	dataTag,
+	isDragging,
+	onDragStart,
+	onDragOver,
+	onDragEnd,
+	onDragEnter,
+	onDragLeave,
+}: FooterCellProps<T>): JSX.Element {
+	return (
+		<FooterCellStyle
+			id={id}
+			data-column-id={column.id}
+			role="cell"
+			className="rdt_TableFooterCell"
+			data-tag={dataTag}
+			$cellStyle={column.style}
+			$renderAsCell={!!column.cell}
+			$allowOverflow={column.allowOverflow}
+			button={column.button}
+			center={column.center}
+			compact={column.compact}
+			grow={column.grow}
+			hide={column.hide}
+			maxWidth={column.maxWidth}
+			minWidth={column.minWidth}
+			right={column.right}
+			width={column.width}
+			$wrapCell={column.wrap}
+			$isDragging={isDragging}
+			onDragStart={onDragStart}
+			onDragOver={onDragOver}
+			onDragEnd={onDragEnd}
+			onDragEnter={onDragEnter}
+			onDragLeave={onDragLeave}
+		>
+			<div data-tag={dataTag}>{getFooterProperty(rows, column.footerContent)}</div>
+		</FooterCellStyle>
+	);
+}
+
+export default React.memo(FooterCell) as typeof FooterCell;
diff --git a/src/DataTable/__tests__/DataTable.test.tsx b/src/DataTable/__tests__/DataTable.test.tsx
index a3864977..9fa8f22f 100644
--- a/src/DataTable/__tests__/DataTable.test.tsx
+++ b/src/DataTable/__tests__/DataTable.test.tsx
@@ -2178,6 +2178,24 @@ describe('DataTable::fixedHeader', () => {
 	});
 });
 
+describe('DataTable::footer', () => {
+	test('should render correctly when a footer is enabled', () => {
+		const mock = dataMock();
+		const { container } = render(<DataTable data={mock.data} columns={mock.columns} showFooter />);
+
+		expect(container.firstChild).toMatchSnapshot();
+	});
+
+	test('should render correctly when a footer is enabled and footer cells contain content', () => {
+		const mock = dataMock({
+			footerContent: () => `footer`,
+		});
+		const { container } = render(<DataTable data={mock.data} columns={mock.columns} showFooter />);
+
+		expect(container.firstChild).toMatchSnapshot();
+	});
+});
+
 describe('DataTable::striped', () => {
 	test('should render correctly when striped', () => {
 		const mock = dataMock();
diff --git a/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
index add75c2a..21855ddc 100644
--- a/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
+++ b/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -1,37 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataTable::Header header should not display with no title 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -61,29 +30,30 @@ exports[`DataTable::Header header should not display with no title 1`] = `
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -103,18 +73,48 @@ exports[`DataTable::Header header should not display with no title 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -784,37 +784,6 @@ exports[`DataTable::Header should render the default context menu when using sel
 `;
 
 exports[`DataTable::Header should render without a header if noHeader is true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -844,29 +813,30 @@ exports[`DataTable::Header should render without a header if noHeader is true 1`
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -886,18 +856,48 @@ exports[`DataTable::Header should render without a header if noHeader is true 1`
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -1080,37 +1080,6 @@ exports[`DataTable::Header title should render correctly 1`] = `
 `;
 
 exports[`DataTable::Pagination should change the page position when using paginationServer if the last item is removed from a page 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -1140,68 +1109,6 @@ exports[`DataTable::Pagination should change the page position when using pagina
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c10 {
-  display: flex;
-  align-items: stretch;
-  align-content: stretch;
-  width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-  min-height: 48px;
-}
-
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-}
-
-.c7 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: inherit;
-  height: 100%;
-  width: 100%;
-  outline: none;
-  user-select: none;
-  overflow: hidden;
-}
-
-.c8 {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.c9 {
-  display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
-}
-
-.c1 {
-  position: relative;
-  width: 100%;
-  display: table;
-}
-
 .c17 {
   cursor: pointer;
   height: 24px;
@@ -1322,6 +1229,99 @@ exports[`DataTable::Pagination should change the page position when using pagina
   margin: 0 4px;
 }
 
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c9 {
+  display: flex;
+  flex-direction: column;
+}
+
+.c7 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.c8 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+}
+
+.c1 {
+  position: relative;
+  width: 100%;
+  display: table;
+}
+
 @media screen and (max-width: 599px) {
   .c19 {
     width: 100%;
@@ -1555,37 +1555,6 @@ exports[`DataTable::Pagination should change the page position when using pagina
 `;
 
 exports[`DataTable::Pagination should have the correct amount of rows when paging backward 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -1615,29 +1584,30 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -1657,18 +1627,48 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -1751,38 +1751,7 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
 `;
 
 exports[`DataTable::Pagination should have the correct amount of rows when paging backward to the first page 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
-.c5 {
+.c5 {
   position: relative;
   display: flex;
   align-items: center;
@@ -1811,29 +1780,30 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -1853,18 +1823,48 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -1947,37 +1947,6 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
 `;
 
 exports[`DataTable::Pagination should have the correct amount of rows when paging forward 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -2007,29 +1976,30 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -2049,18 +2019,48 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -2143,37 +2143,6 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
 `;
 
 exports[`DataTable::Pagination should have the correct amount of rows when paging to the last page 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -2203,29 +2172,30 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c10 {
-  display: flex;
-  align-items: stretch;
-  align-content: stretch;
+.c0 {
+  position: relative;
   width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
   box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -2245,18 +2215,48 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -2339,37 +2339,6 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
 `;
 
 exports[`DataTable::Pagination should navigate to page 1 if the table is sorted 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -2399,29 +2368,30 @@ exports[`DataTable::Pagination should navigate to page 1 if the table is sorted
   min-width: 100px;
 }
 
-.c13 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c11 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c11:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c10 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c9 {
@@ -2469,18 +2439,48 @@ exports[`DataTable::Pagination should navigate to page 1 if the table is sorted
   text-overflow: ellipsis;
 }
 
-.c10 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c13 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c11 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c11:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -2567,37 +2567,6 @@ exports[`DataTable::Pagination should navigate to page 1 if the table is sorted
 `;
 
 exports[`DataTable::Pagination should recalculate pagination position if there is only 1 item and it is removed from the data 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -2627,29 +2596,30 @@ exports[`DataTable::Pagination should recalculate pagination position if there i
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -2669,18 +2639,48 @@ exports[`DataTable::Pagination should recalculate pagination position if there i
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -2763,37 +2763,6 @@ exports[`DataTable::Pagination should recalculate pagination position if there i
 `;
 
 exports[`DataTable::Pagination should render correctly if pagination is enabled 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -2823,29 +2792,30 @@ exports[`DataTable::Pagination should render correctly if pagination is enabled
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -2865,18 +2835,48 @@ exports[`DataTable::Pagination should render correctly if pagination is enabled
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -2978,37 +2978,6 @@ exports[`DataTable::Pagination should render correctly if pagination is enabled
 `;
 
 exports[`DataTable::Pagination should render correctly when a paginationComponentOptions are passed 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -3038,29 +3007,30 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -3080,18 +3050,48 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -3193,38 +3193,7 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
 `;
 
 exports[`DataTable::Pagination should render correctly when a paginationComponentOptions selectAllRowsItem is true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
-.c5 {
+.c5 {
   position: relative;
   display: flex;
   align-items: center;
@@ -3253,29 +3222,30 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -3295,18 +3265,48 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -3408,37 +3408,6 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
 `;
 
 exports[`DataTable::Pagination should render correctly when a paginationComponentOptions selectAllRowsItem is true and selectAllRowsItemText is provided 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -3468,29 +3437,30 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -3510,18 +3480,48 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -3623,37 +3623,6 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
 `;
 
 exports[`DataTable::Pagination should render correctly when a paginationComponentOptions to hide the per page dropdown are passed 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -3683,29 +3652,30 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -3725,18 +3695,48 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -3838,37 +3838,6 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
 `;
 
 exports[`DataTable::Pagination should render correctly when paginationResetDefaultPage is toggled 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -3898,29 +3867,30 @@ exports[`DataTable::Pagination should render correctly when paginationResetDefau
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -3940,18 +3910,48 @@ exports[`DataTable::Pagination should render correctly when paginationResetDefau
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -4034,37 +4034,6 @@ exports[`DataTable::Pagination should render correctly when paginationResetDefau
 `;
 
 exports[`DataTable::Theming should render correctly when a custom style is applied 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -4094,29 +4063,30 @@ exports[`DataTable::Theming should render correctly when a custom style is appli
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
-  color: red;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -4136,24 +4106,54 @@ exports[`DataTable::Theming should render correctly when a custom style is appli
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c1 {
-  position: relative;
-  width: 100%;
-  display: table;
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: red;
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+}
+
+.c1 {
+  position: relative;
+  width: 100%;
+  display: table;
 }
 
 <div
@@ -4245,37 +4245,6 @@ exports[`DataTable::Theming should render correctly when a custom style is appli
 `;
 
 exports[`DataTable::column.style should render correctly when a style is set on a column 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -4305,33 +4274,30 @@ exports[`DataTable::column.style should render correctly when a style is set on
   min-width: 100px;
 }
 
-.c12 {
-  background-color: rgba(63, 195, 128, 0.9);
-}
-
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -4351,18 +4317,52 @@ exports[`DataTable::column.style should render correctly when a style is set on
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 {
+  background-color: rgba(63, 195, 128, 0.9);
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -4460,37 +4460,6 @@ exports[`DataTable::column.style should render correctly when a style is set on
 `;
 
 exports[`DataTable::columns should render correctly if column.center 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -4521,29 +4490,30 @@ exports[`DataTable::columns should render correctly if column.center 1`] = `
   justify-content: center;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -4563,35 +4533,65 @@ exports[`DataTable::columns should render correctly if column.center 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
 }
 
-.c1 {
-  position: relative;
-  width: 100%;
-  display: table;
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-<div
-  class="c0"
->
-  <div
-    class="c1"
-  >
-    <div
-      class="c2 rdt_Table"
-      role="table"
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+}
+
+.c1 {
+  position: relative;
+  width: 100%;
+  display: table;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <div
+      class="c2 rdt_Table"
+      role="table"
     >
       <div
         class="c3 rdt_TableHead"
@@ -4672,37 +4672,6 @@ exports[`DataTable::columns should render correctly if column.center 1`] = `
 `;
 
 exports[`DataTable::columns should render correctly if column.hide is an integer 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -4732,29 +4701,30 @@ exports[`DataTable::columns should render correctly if column.hide is an integer
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -4774,18 +4744,48 @@ exports[`DataTable::columns should render correctly if column.hide is an integer
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -4892,37 +4892,6 @@ exports[`DataTable::columns should render correctly if column.hide is an integer
 `;
 
 exports[`DataTable::columns should render correctly if column.hide lg 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -4952,29 +4921,30 @@ exports[`DataTable::columns should render correctly if column.hide lg 1`] = `
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -4994,18 +4964,48 @@ exports[`DataTable::columns should render correctly if column.hide lg 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -5112,38 +5112,7 @@ exports[`DataTable::columns should render correctly if column.hide lg 1`] = `
 `;
 
 exports[`DataTable::columns should render correctly if column.hide md 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
-.c5 {
+.c5 {
   position: relative;
   display: flex;
   align-items: center;
@@ -5172,29 +5141,30 @@ exports[`DataTable::columns should render correctly if column.hide md 1`] = `
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -5214,18 +5184,48 @@ exports[`DataTable::columns should render correctly if column.hide md 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -5332,37 +5332,6 @@ exports[`DataTable::columns should render correctly if column.hide md 1`] = `
 `;
 
 exports[`DataTable::columns should render correctly if column.hide sm 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -5392,29 +5361,30 @@ exports[`DataTable::columns should render correctly if column.hide sm 1`] = `
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -5434,18 +5404,48 @@ exports[`DataTable::columns should render correctly if column.hide sm 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -5552,37 +5552,6 @@ exports[`DataTable::columns should render correctly if column.hide sm 1`] = `
 `;
 
 exports[`DataTable::columns should render correctly if column.maxWidth 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -5612,29 +5581,30 @@ exports[`DataTable::columns should render correctly if column.maxWidth 1`] = `
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
-  display: flex;
-  align-items: stretch;
-  align-content: stretch;
-  width: 100%;
+.c2 {
+  position: relative;
   box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -5654,18 +5624,48 @@ exports[`DataTable::columns should render correctly if column.maxWidth 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -5766,37 +5766,6 @@ exports[`DataTable::columns should render correctly if column.maxWidth 1`] = `
 `;
 
 exports[`DataTable::columns should render correctly if column.minWidth 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -5826,29 +5795,30 @@ exports[`DataTable::columns should render correctly if column.minWidth 1`] = `
   min-width: 200px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -5868,18 +5838,48 @@ exports[`DataTable::columns should render correctly if column.minWidth 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -5980,37 +5980,6 @@ exports[`DataTable::columns should render correctly if column.minWidth 1`] = `
 `;
 
 exports[`DataTable::columns should render correctly if column.omit is true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -6040,29 +6009,30 @@ exports[`DataTable::columns should render correctly if column.omit is true 1`] =
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -6082,24 +6052,54 @@ exports[`DataTable::columns should render correctly if column.omit is true 1`] =
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c1 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  display: table;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+}
+
+.c1 {
+  position: relative;
+  width: 100%;
+  display: table;
 }
 
 <div
@@ -6191,37 +6191,6 @@ exports[`DataTable::columns should render correctly if column.omit is true 1`] =
 `;
 
 exports[`DataTable::columns should render correctly if column.right 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -6252,29 +6221,30 @@ exports[`DataTable::columns should render correctly if column.right 1`] = `
   justify-content: flex-end;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -6294,18 +6264,48 @@ exports[`DataTable::columns should render correctly if column.right 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -6403,37 +6403,6 @@ exports[`DataTable::columns should render correctly if column.right 1`] = `
 `;
 
 exports[`DataTable::columns should render correctly if column.width 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -6465,29 +6434,30 @@ exports[`DataTable::columns should render correctly if column.width 1`] = `
   max-width: 200px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -6507,18 +6477,48 @@ exports[`DataTable::columns should render correctly if column.width 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -6619,38 +6619,7 @@ exports[`DataTable::columns should render correctly if column.width 1`] = `
 `;
 
 exports[`DataTable::columns should render correctly when column.allowOverflow = true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
-.c5 {
+.c5 {
   position: relative;
   display: flex;
   align-items: center;
@@ -6679,29 +6648,30 @@ exports[`DataTable::columns should render correctly when column.allowOverflow =
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: visible;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -6721,18 +6691,48 @@ exports[`DataTable::columns should render correctly when column.allowOverflow =
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -6830,37 +6830,6 @@ exports[`DataTable::columns should render correctly when column.allowOverflow =
 `;
 
 exports[`DataTable::columns should render correctly when column.button = true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -6892,29 +6861,30 @@ exports[`DataTable::columns should render correctly when column.button = true 1`
   padding: 0;
 }
 
-.c13 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c11 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c11:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c10 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -6938,18 +6908,48 @@ exports[`DataTable::columns should render correctly when column.button = true 1`
   text-overflow: ellipsis;
 }
 
-.c10 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c13 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c11 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c11:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -7041,37 +7041,6 @@ exports[`DataTable::columns should render correctly when column.button = true 1`
 `;
 
 exports[`DataTable::columns should render correctly when column.cell is set to a component 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -7101,23 +7070,30 @@ exports[`DataTable::columns should render correctly when column.cell is set to a
   min-width: 100px;
 }
 
-.c10 {
-  display: flex;
-  align-items: stretch;
-  align-content: stretch;
+.c0 {
+  position: relative;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-  min-height: 48px;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -7137,18 +7113,42 @@ exports[`DataTable::columns should render correctly when column.cell is set to a
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -7242,37 +7242,6 @@ exports[`DataTable::columns should render correctly when column.cell is set to a
 `;
 
 exports[`DataTable::columns should render correctly when column.compact = true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -7303,29 +7272,30 @@ exports[`DataTable::columns should render correctly when column.compact = true 1
   padding: 0;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -7345,18 +7315,48 @@ exports[`DataTable::columns should render correctly when column.compact = true 1
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -7454,37 +7454,6 @@ exports[`DataTable::columns should render correctly when column.compact = true 1
 `;
 
 exports[`DataTable::columns should render correctly when column.sortable = true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -7514,29 +7483,30 @@ exports[`DataTable::columns should render correctly when column.sortable = true
   min-width: 100px;
 }
 
-.c13 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c11 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c11:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c10 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c9 {
@@ -7596,21 +7566,51 @@ exports[`DataTable::columns should render correctly when column.sortable = true
   text-overflow: ellipsis;
 }
 
-.c10 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
 }
 
-.c1 {
+.c13 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c11 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c11:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+}
+
+.c1 {
   position: relative;
   width: 100%;
   display: table;
@@ -7709,37 +7709,6 @@ exports[`DataTable::columns should render correctly when column.sortable = true
 `;
 
 exports[`DataTable::columns should render correctly when column.wrap = true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -7769,29 +7738,30 @@ exports[`DataTable::columns should render correctly when column.wrap = true 1`]
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: normal;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -7811,18 +7781,48 @@ exports[`DataTable::columns should render correctly when column.wrap = true 1`]
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -7920,37 +7920,6 @@ exports[`DataTable::columns should render correctly when column.wrap = true 1`]
 `;
 
 exports[`DataTable::columns should render correctly when ignoreRowClick = true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -7980,29 +7949,30 @@ exports[`DataTable::columns should render correctly when ignoreRowClick = true 1
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -8022,18 +7992,48 @@ exports[`DataTable::columns should render correctly when ignoreRowClick = true 1
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -8125,45 +8125,14 @@ exports[`DataTable::columns should render correctly when ignoreRowClick = true 1
 `;
 
 exports[`DataTable::columns should render correctly with columns/data 1`] = `
-.c2 {
+.c5 {
   position: relative;
-  box-sizing: border-box;
   display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
-.c5 {
-  position: relative;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  line-height: normal;
-  padding-left: 16px;
-  padding-right: 16px;
+  align-items: center;
+  box-sizing: border-box;
+  line-height: normal;
+  padding-left: 16px;
+  padding-right: 16px;
 }
 
 .c11 {
@@ -8185,29 +8154,30 @@ exports[`DataTable::columns should render correctly with columns/data 1`] = `
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -8227,18 +8197,48 @@ exports[`DataTable::columns should render correctly with columns/data 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -8336,37 +8336,6 @@ exports[`DataTable::columns should render correctly with columns/data 1`] = `
 `;
 
 exports[`DataTable::conditionalCellStyles should render correctly when conditionalCellStyles is defined and there is a match 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -8396,29 +8365,30 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -8438,18 +8408,48 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -8548,37 +8548,6 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
 `;
 
 exports[`DataTable::conditionalCellStyles should render correctly when conditionalCellStyles is defined and there is no match 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -8608,29 +8577,30 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -8650,18 +8620,48 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -8759,37 +8759,6 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
 `;
 
 exports[`DataTable::conditionalCellStyles should render correctly when conditionalCellStyles style is a function 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -8819,29 +8788,30 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -8861,18 +8831,48 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -8971,37 +8971,6 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
 `;
 
 exports[`DataTable::conditionalCellStyles should render correctly when conditionalCellStyles with classNames is defined and there is a match 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -9031,29 +9000,30 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -9073,24 +9043,54 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c1 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  display: table;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+}
+
+.c1 {
+  position: relative;
+  width: 100%;
+  display: table;
 }
 
 <div
@@ -9182,37 +9182,6 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
 `;
 
 exports[`DataTable::conditionalRowStyles should render correctly when conditionalRowStyles are an empty array 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -9242,29 +9211,30 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -9284,18 +9254,48 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -9393,6 +9393,44 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
 `;
 
 exports[`DataTable::conditionalRowStyles should render correctly when conditionalRowStyles is defined and there is a match 1`] = `
+.c5 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  line-height: normal;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.c11 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  line-height: normal;
+  padding-left: 16px;
+  padding-right: 16px;
+  word-break: break-word;
+}
+
+.c6 {
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
+  max-width: 100%;
+  min-width: 100px;
+}
+
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
 .c2 {
   position: relative;
   box-sizing: border-box;
@@ -9405,6 +9443,28 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
   background-color: #FFFFFF;
 }
 
+.c9 {
+  display: flex;
+  flex-direction: column;
+}
+
+.c7 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.c8 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .c3 {
   display: flex;
   width: 100%;
@@ -9424,35 +9484,6 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
   border-bottom-style: solid;
 }
 
-.c5 {
-  position: relative;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  line-height: normal;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c11 {
-  position: relative;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  line-height: normal;
-  padding-left: 16px;
-  padding-right: 16px;
-  word-break: break-word;
-}
-
-.c6 {
-  flex-grow: 1;
-  flex-shrink: 0;
-  flex-basis: 0;
-  max-width: 100%;
-  min-width: 100px;
-}
-
 .c12 div:first-child {
   white-space: nowrap;
   overflow: hidden;
@@ -9503,41 +9534,10 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
   border-bottom-color: rgba(0,0,0,.12);
 }
 
-.c7 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: inherit;
-  height: 100%;
+.c1 {
+  position: relative;
   width: 100%;
-  outline: none;
-  user-select: none;
-  overflow: hidden;
-}
-
-.c8 {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.c9 {
-  display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
-}
-
-.c1 {
-  position: relative;
-  width: 100%;
-  display: table;
+  display: table;
 }
 
 <div
@@ -9629,37 +9629,6 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
 `;
 
 exports[`DataTable::conditionalRowStyles should render correctly when conditionalRowStyles is defined and there is no match 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -9689,29 +9658,30 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -9731,18 +9701,48 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -9840,38 +9840,6 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
 `;
 
 exports[`DataTable::dense should render correctly when dense 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-  min-height: 32px;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -9901,30 +9869,30 @@ exports[`DataTable::dense should render correctly when dense 1`] = `
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
-  min-height: 32px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -9944,18 +9912,50 @@ exports[`DataTable::dense should render correctly when dense 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+  min-height: 32px;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+  min-height: 32px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -10053,49 +10053,18 @@ exports[`DataTable::dense should render correctly when dense 1`] = `
 `;
 
 exports[`DataTable::direction should render correctly when direction is auto 1`] = `
-.c2 {
+.c5 {
   position: relative;
-  box-sizing: border-box;
   display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
+  align-items: center;
+  box-sizing: border-box;
+  line-height: normal;
+  padding-left: 16px;
+  padding-right: 16px;
 }
 
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
-.c5 {
-  position: relative;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  line-height: normal;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c11 {
-  position: relative;
+.c11 {
+  position: relative;
   display: flex;
   align-items: center;
   box-sizing: border-box;
@@ -10113,29 +10082,30 @@ exports[`DataTable::direction should render correctly when direction is auto 1`]
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -10155,18 +10125,48 @@ exports[`DataTable::direction should render correctly when direction is auto 1`]
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -10268,37 +10268,6 @@ exports[`DataTable::direction should render correctly when direction is auto 1`]
 `;
 
 exports[`DataTable::direction should render correctly when direction is ltr 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -10328,29 +10297,30 @@ exports[`DataTable::direction should render correctly when direction is ltr 1`]
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -10370,18 +10340,48 @@ exports[`DataTable::direction should render correctly when direction is ltr 1`]
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -10484,37 +10484,6 @@ exports[`DataTable::direction should render correctly when direction is ltr 1`]
 `;
 
 exports[`DataTable::direction should render correctly when direction is rtl 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -10544,29 +10513,30 @@ exports[`DataTable::direction should render correctly when direction is rtl 1`]
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -10586,18 +10556,48 @@ exports[`DataTable::direction should render correctly when direction is rtl 1`]
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -10700,37 +10700,6 @@ exports[`DataTable::direction should render correctly when direction is rtl 1`]
 `;
 
 exports[`DataTable::direction should render correctly when direction is rtl when using a context menu 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -10783,38 +10752,30 @@ exports[`DataTable::direction should render correctly when direction is rtl when
   min-width: 100px;
 }
 
-.c16 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c14 {
-  flex: 0 0 48px;
-  min-width: 48px;
-  justify-content: center;
-  align-items: center;
-  user-select: none;
-  white-space: nowrap;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c12 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c12:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c11 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c9 {
@@ -10843,18 +10804,57 @@ exports[`DataTable::direction should render correctly when direction is rtl when
   font-size: unset;
 }
 
-.c11 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c16 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c14 {
+  flex: 0 0 48px;
+  min-width: 48px;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.c12 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c12:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -10983,37 +10983,6 @@ exports[`DataTable::direction should render correctly when direction is rtl when
 `;
 
 exports[`DataTable::expandableRows should expand a row if expandableRows is true and expandOnRowClicked is true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -11055,30 +11024,97 @@ exports[`DataTable::expandableRows should expand a row if expandableRows is true
   min-width: 100px;
 }
 
-.c16 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c15 {
-  display: inline-flex;
-  align-items: center;
-  user-select: none;
-  white-space: nowrap;
-  border: none;
-  background-color: transparent;
-  color: rgba(0,0,0,.54);
-  fill: rgba(0,0,0,.54);
-  background-color: transparent;
-  border-radius: 2px;
-  transition: 0.25s;
-  height: 100%;
+.c0 {
+  position: relative;
   width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c15:hover:enabled {
-  cursor: pointer;
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c11 {
+  display: flex;
+  flex-direction: column;
+}
+
+.c9 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.c10 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.c6 {
+  white-space: nowrap;
+  flex: 0 0 48px;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c16 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c15 {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  white-space: nowrap;
+  border: none;
+  background-color: transparent;
+  color: rgba(0,0,0,.54);
+  fill: rgba(0,0,0,.54);
+  background-color: transparent;
+  border-radius: 2px;
+  transition: 0.25s;
+  height: 100%;
+  width: 100%;
+}
+
+.c15:hover:enabled {
+  cursor: pointer;
 }
 
 .c15:disabled {
@@ -11136,48 +11172,12 @@ exports[`DataTable::expandableRows should expand a row if expandableRows is true
   cursor: pointer;
 }
 
-.c9 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: inherit;
-  height: 100%;
-  width: 100%;
-  outline: none;
-  user-select: none;
-  overflow: hidden;
-}
-
-.c10 {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.c11 {
-  display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
-}
-
 .c1 {
   position: relative;
   width: 100%;
   display: table;
 }
 
-.c6 {
-  white-space: nowrap;
-  flex: 0 0 48px;
-}
-
 <div
   class="c0"
 >
@@ -11337,37 +11337,6 @@ exports[`DataTable::expandableRows should expand a row if expandableRows is true
 `;
 
 exports[`DataTable::expandableRows should expand a row if expandableRows is true and expandOnRowDoubleClicked is true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -11409,6 +11378,73 @@ exports[`DataTable::expandableRows should expand a row if expandableRows is true
   min-width: 100px;
 }
 
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c11 {
+  display: flex;
+  flex-direction: column;
+}
+
+.c9 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.c10 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.c6 {
+  white-space: nowrap;
+  flex: 0 0 48px;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
 .c16 div:first-child {
   white-space: nowrap;
   overflow: hidden;
@@ -11490,48 +11526,12 @@ exports[`DataTable::expandableRows should expand a row if expandableRows is true
   cursor: pointer;
 }
 
-.c9 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: inherit;
-  height: 100%;
-  width: 100%;
-  outline: none;
-  user-select: none;
-  overflow: hidden;
-}
-
-.c10 {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.c11 {
-  display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
-}
-
 .c1 {
   position: relative;
   width: 100%;
   display: table;
 }
 
-.c6 {
-  white-space: nowrap;
-  flex: 0 0 48px;
-}
-
 <div
   class="c0"
 >
@@ -11691,50 +11691,19 @@ exports[`DataTable::expandableRows should expand a row if expandableRows is true
 `;
 
 exports[`DataTable::expandableRows should not expand a row if the expander row is disabled and expandOnRowClicked is true 1`] = `
-.c2 {
+.c5 {
   position: relative;
+  display: flex;
+  align-items: center;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
-.c5 {
-  position: relative;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  line-height: normal;
-  padding-left: 16px;
-  padding-right: 16px;
-  word-break: break-word;
-}
-
-.c7 {
-  position: relative;
+  line-height: normal;
+  padding-left: 16px;
+  padding-right: 16px;
+  word-break: break-word;
+}
+
+.c7 {
+  position: relative;
   display: flex;
   align-items: center;
   box-sizing: border-box;
@@ -11763,6 +11732,73 @@ exports[`DataTable::expandableRows should not expand a row if the expander row i
   min-width: 100px;
 }
 
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c11 {
+  display: flex;
+  flex-direction: column;
+}
+
+.c9 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.c10 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.c6 {
+  white-space: nowrap;
+  flex: 0 0 48px;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
 .c16 div:first-child {
   white-space: nowrap;
   overflow: hidden;
@@ -11856,48 +11892,12 @@ exports[`DataTable::expandableRows should not expand a row if the expander row i
   cursor: pointer;
 }
 
-.c9 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: inherit;
-  height: 100%;
-  width: 100%;
-  outline: none;
-  user-select: none;
-  overflow: hidden;
-}
-
-.c10 {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.c11 {
-  display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
-}
-
 .c1 {
   position: relative;
   width: 100%;
   display: table;
 }
 
-.c6 {
-  white-space: nowrap;
-  flex: 0 0 48px;
-}
-
 <div
   class="c0"
 >
@@ -12047,37 +12047,6 @@ exports[`DataTable::expandableRows should not expand a row if the expander row i
 `;
 
 exports[`DataTable::expandableRows should not render expandableRows expandableRows is missing 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -12107,29 +12076,30 @@ exports[`DataTable::expandableRows should not render expandableRows expandableRo
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -12149,18 +12119,48 @@ exports[`DataTable::expandableRows should not render expandableRows expandableRo
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -12258,38 +12258,7 @@ exports[`DataTable::expandableRows should not render expandableRows expandableRo
 `;
 
 exports[`DataTable::expandableRows should render correctly when expandableRowExpanded changes on render 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
-.c15 {
+.c15 {
   position: relative;
   display: flex;
   align-items: center;
@@ -12341,38 +12310,30 @@ exports[`DataTable::expandableRows should render correctly when expandableRowExp
   min-width: 100px;
 }
 
-.c16 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c14 {
-  flex: 0 0 48px;
-  min-width: 48px;
-  justify-content: center;
-  align-items: center;
-  user-select: none;
-  white-space: nowrap;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c12 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c12:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c11 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c9 {
@@ -12401,18 +12362,57 @@ exports[`DataTable::expandableRows should render correctly when expandableRowExp
   font-size: unset;
 }
 
-.c11 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c16 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c14 {
+  flex: 0 0 48px;
+  min-width: 48px;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.c12 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c12:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -12540,37 +12540,6 @@ exports[`DataTable::expandableRows should render correctly when expandableRowExp
 `;
 
 exports[`DataTable::expandableRows should render correctly when expandableRowExpanded is true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -12612,6 +12581,73 @@ exports[`DataTable::expandableRows should render correctly when expandableRowExp
   min-width: 100px;
 }
 
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c11 {
+  display: flex;
+  flex-direction: column;
+}
+
+.c9 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.c10 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.c6 {
+  white-space: nowrap;
+  flex: 0 0 48px;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
 .c16 div:first-child {
   white-space: nowrap;
   overflow: hidden;
@@ -12689,48 +12725,12 @@ exports[`DataTable::expandableRows should render correctly when expandableRowExp
   border-bottom-color: rgba(0,0,0,.12);
 }
 
-.c9 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: inherit;
-  height: 100%;
-  width: 100%;
-  outline: none;
-  user-select: none;
-  overflow: hidden;
-}
-
-.c10 {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.c11 {
-  display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
-}
-
 .c1 {
   position: relative;
   width: 100%;
   display: table;
 }
 
-.c6 {
-  white-space: nowrap;
-  flex: 0 0 48px;
-}
-
 <div
   class="c0"
 >
@@ -12890,37 +12890,6 @@ exports[`DataTable::expandableRows should render correctly when expandableRowExp
 `;
 
 exports[`DataTable::expandableRows should render correctly when expandableRows is true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -12962,6 +12931,73 @@ exports[`DataTable::expandableRows should render correctly when expandableRows i
   min-width: 100px;
 }
 
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c11 {
+  display: flex;
+  flex-direction: column;
+}
+
+.c9 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.c10 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.c6 {
+  white-space: nowrap;
+  flex: 0 0 48px;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
 .c16 div:first-child {
   white-space: nowrap;
   overflow: hidden;
@@ -13032,48 +13068,12 @@ exports[`DataTable::expandableRows should render correctly when expandableRows i
   border-bottom-color: rgba(0,0,0,.12);
 }
 
-.c9 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: inherit;
-  height: 100%;
-  width: 100%;
-  outline: none;
-  user-select: none;
-  overflow: hidden;
-}
-
-.c10 {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.c11 {
-  display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
-}
-
 .c1 {
   position: relative;
   width: 100%;
   display: table;
 }
 
-.c6 {
-  white-space: nowrap;
-  flex: 0 0 48px;
-}
-
 <div
   class="c0"
 >
@@ -13222,37 +13222,6 @@ exports[`DataTable::expandableRows should render correctly when expandableRows i
 `;
 
 exports[`DataTable::expandableRows should render correctly when expandableRows is true and the row is toggled 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -13294,6 +13263,73 @@ exports[`DataTable::expandableRows should render correctly when expandableRows i
   min-width: 100px;
 }
 
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c11 {
+  display: flex;
+  flex-direction: column;
+}
+
+.c9 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.c10 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.c6 {
+  white-space: nowrap;
+  flex: 0 0 48px;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
 .c16 div:first-child {
   white-space: nowrap;
   overflow: hidden;
@@ -13371,46 +13407,10 @@ exports[`DataTable::expandableRows should render correctly when expandableRows i
   border-bottom-color: rgba(0,0,0,.12);
 }
 
-.c9 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: inherit;
-  height: 100%;
+.c1 {
+  position: relative;
   width: 100%;
-  outline: none;
-  user-select: none;
-  overflow: hidden;
-}
-
-.c10 {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.c11 {
-  display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
-}
-
-.c1 {
-  position: relative;
-  width: 100%;
-  display: table;
-}
-
-.c6 {
-  white-space: nowrap;
-  flex: 0 0 48px;
+  display: table;
 }
 
 <div
@@ -13572,37 +13572,6 @@ exports[`DataTable::expandableRows should render correctly when expandableRows i
 `;
 
 exports[`DataTable::expandableRows should render correctly when expandableRowsHideExpander is true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -13632,29 +13601,30 @@ exports[`DataTable::expandableRows should render correctly when expandableRowsHi
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -13674,18 +13644,48 @@ exports[`DataTable::expandableRows should render correctly when expandableRowsHi
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -13783,41 +13783,6 @@ exports[`DataTable::expandableRows should render correctly when expandableRowsHi
 `;
 
 exports[`DataTable::fixedHeader should render correctly when fixedHeader 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  position: sticky;
-  position: -webkit-sticky;
-  top: 0;
-  z-index: 1;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -13847,29 +13812,32 @@ exports[`DataTable::fixedHeader should render correctly when fixedHeader 1`] = `
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: auto;
+  min-height: 0;
+  max-height: 100vh;
+  -webkit-overflow-scrolling: touch;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -13889,20 +13857,52 @@ exports[`DataTable::fixedHeader should render correctly when fixedHeader 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0;
+  z-index: 1;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: auto;
-  min-height: 0;
-  max-height: 100vh;
-  -webkit-overflow-scrolling: touch;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -14000,42 +14000,7 @@ exports[`DataTable::fixedHeader should render correctly when fixedHeader 1`] = `
 `;
 
 exports[`DataTable::fixedHeader should render correctly when fixedHeader and fixedHeaderScrollHeight 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  position: sticky;
-  position: -webkit-sticky;
-  top: 0;
-  z-index: 1;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
-.c5 {
+.c5 {
   position: relative;
   display: flex;
   align-items: center;
@@ -14064,29 +14029,32 @@ exports[`DataTable::fixedHeader should render correctly when fixedHeader and fix
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: auto;
+  min-height: 0;
+  max-height: 100px;
+  -webkit-overflow-scrolling: touch;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -14106,20 +14074,52 @@ exports[`DataTable::fixedHeader should render correctly when fixedHeader and fix
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0;
+  z-index: 1;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: auto;
-  min-height: 0;
-  max-height: 100px;
-  -webkit-overflow-scrolling: touch;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -14216,38 +14216,7 @@ exports[`DataTable::fixedHeader should render correctly when fixedHeader and fix
 </div>
 `;
 
-exports[`DataTable::highlightOnHover should render correctly when highlightOnHover 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
+exports[`DataTable::footer should render correctly when a footer is enabled 1`] = `
 .c5 {
   position: relative;
   display: flex;
@@ -14277,40 +14246,30 @@ exports[`DataTable::highlightOnHover should render correctly when highlightOnHov
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-}
-
-.c10:hover {
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #EEEEEE;
-  transition-duration: 0.15s;
-  transition-property: background-color;
-  border-bottom-color: #FFFFFF;
-  outline-style: solid;
-  outline-width: 1px;
-  outline-color: #FFFFFF;
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -14330,18 +14289,575 @@ exports[`DataTable::highlightOnHover should render correctly when highlightOnHov
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c13 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c14 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-top-width: 1px;
+  border-top-color: rgba(0,0,0,.12);
+  border-top-style: solid;
+}
+
+.c15 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+}
+
+.c1 {
+  position: relative;
+  width: 100%;
+  display: table;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <div
+      class="c2 rdt_Table"
+      role="table"
+    >
+      <div
+        class="c3 rdt_TableHead"
+        role="rowgroup"
+      >
+        <div
+          class="c4 rdt_TableHeadRow"
+          role="row"
+        >
+          <div
+            class="c5 c6 rdt_TableCol"
+            data-column-id="1"
+          >
+            <div
+              class="c7 rdt_TableCol_Sortable"
+              data-column-id="1"
+              data-sort-id="1"
+              disabled=""
+              role="columnheader"
+              tabindex="0"
+            >
+              <div
+                class="c8"
+                data-column-id="1"
+              >
+                Test
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="c9 rdt_TableBody"
+        role="rowgroup"
+      >
+        <div
+          class="c10 rdt_TableRow"
+          id="row-1"
+          role="row"
+        >
+          <div
+            class="c11 c6 c12 rdt_TableCell"
+            data-column-id="1"
+            data-tag="allowRowEvents"
+            id="cell-1-1"
+            role="cell"
+          >
+            <div
+              data-tag="allowRowEvents"
+            >
+              Apple
+            </div>
+          </div>
+        </div>
+        <div
+          class="c10 rdt_TableRow"
+          id="row-2"
+          role="row"
+        >
+          <div
+            class="c11 c6 c12 rdt_TableCell"
+            data-column-id="1"
+            data-tag="allowRowEvents"
+            id="cell-1-2"
+            role="cell"
+          >
+            <div
+              data-tag="allowRowEvents"
+            >
+              Zuchinni
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="c13 rdt_TableFoot"
+        role="rowgroup"
+      >
+        <div
+          class="c14 rdt_TableFootRow"
+          role="row"
+        >
+          <div
+            class="c11 c6 c15 rdt_TableFooterCell"
+            data-column-id="1"
+            data-tag="allowRowEvents"
+            id="1"
+            role="cell"
+          >
+            <div
+              data-tag="allowRowEvents"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DataTable::footer should render correctly when a footer is enabled and footer cells contain content 1`] = `
+.c5 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  line-height: normal;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.c11 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  line-height: normal;
+  padding-left: 16px;
+  padding-right: 16px;
+  word-break: break-word;
+}
+
+.c6 {
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
+  max-width: 100%;
+  min-width: 100px;
+}
+
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c9 {
+  display: flex;
+  flex-direction: column;
+}
+
+.c7 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.c8 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.c13 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c14 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-top-width: 1px;
+  border-top-color: rgba(0,0,0,.12);
+  border-top-style: solid;
+}
+
+.c15 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+}
+
+.c1 {
+  position: relative;
+  width: 100%;
+  display: table;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <div
+      class="c2 rdt_Table"
+      role="table"
+    >
+      <div
+        class="c3 rdt_TableHead"
+        role="rowgroup"
+      >
+        <div
+          class="c4 rdt_TableHeadRow"
+          role="row"
+        >
+          <div
+            class="c5 c6 rdt_TableCol"
+            data-column-id="1"
+          >
+            <div
+              class="c7 rdt_TableCol_Sortable"
+              data-column-id="1"
+              data-sort-id="1"
+              disabled=""
+              role="columnheader"
+              tabindex="0"
+            >
+              <div
+                class="c8"
+                data-column-id="1"
+              >
+                Test
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="c9 rdt_TableBody"
+        role="rowgroup"
+      >
+        <div
+          class="c10 rdt_TableRow"
+          id="row-1"
+          role="row"
+        >
+          <div
+            class="c11 c6 c12 rdt_TableCell"
+            data-column-id="1"
+            data-tag="allowRowEvents"
+            id="cell-1-1"
+            role="cell"
+          >
+            <div
+              data-tag="allowRowEvents"
+            >
+              Apple
+            </div>
+          </div>
+        </div>
+        <div
+          class="c10 rdt_TableRow"
+          id="row-2"
+          role="row"
+        >
+          <div
+            class="c11 c6 c12 rdt_TableCell"
+            data-column-id="1"
+            data-tag="allowRowEvents"
+            id="cell-1-2"
+            role="cell"
+          >
+            <div
+              data-tag="allowRowEvents"
+            >
+              Zuchinni
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="c13 rdt_TableFoot"
+        role="rowgroup"
+      >
+        <div
+          class="c14 rdt_TableFootRow"
+          role="row"
+        >
+          <div
+            class="c11 c6 c15 rdt_TableFooterCell"
+            data-column-id="1"
+            data-tag="allowRowEvents"
+            id="1"
+            role="cell"
+          >
+            <div
+              data-tag="allowRowEvents"
+            >
+              footer
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DataTable::highlightOnHover should render correctly when highlightOnHover 1`] = `
+.c5 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  line-height: normal;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.c11 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  line-height: normal;
+  padding-left: 16px;
+  padding-right: 16px;
+  word-break: break-word;
+}
+
+.c6 {
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
+  max-width: 100%;
+  min-width: 100px;
+}
+
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c9 {
+  display: flex;
+  flex-direction: column;
+}
+
+.c7 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.c8 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+}
+
+.c10:hover {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #EEEEEE;
+  transition-duration: 0.15s;
+  transition-property: background-color;
+  border-bottom-color: #FFFFFF;
+  outline-style: solid;
+  outline-width: 1px;
+  outline-color: #FFFFFF;
 }
 
 .c1 {
@@ -14439,37 +14955,6 @@ exports[`DataTable::highlightOnHover should render correctly when highlightOnHov
 `;
 
 exports[`DataTable::pointerOnHover should render correctly when pointerOnHover 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -14499,33 +14984,30 @@ exports[`DataTable::pointerOnHover should render correctly when pointerOnHover 1
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
-}
-
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
 }
 
-.c10:hover {
-  cursor: pointer;
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -14545,18 +15027,52 @@ exports[`DataTable::pointerOnHover should render correctly when pointerOnHover 1
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+}
+
+.c10:hover {
+  cursor: pointer;
 }
 
 .c1 {
@@ -14654,14 +15170,14 @@ exports[`DataTable::pointerOnHover should render correctly when pointerOnHover 1
 `;
 
 exports[`DataTable::progress/nodata should only show Loading if progressPending prop changes 1`] = `
-.c3 {
+.c2 {
   position: relative;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
   width: 100%;
   height: 100%;
-  max-width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
 }
@@ -14675,14 +15191,14 @@ exports[`DataTable::progress/nodata should only show Loading if progressPending
   min-height: 0;
 }
 
-.c2 {
+.c3 {
   position: relative;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
 }
@@ -14717,14 +15233,14 @@ exports[`DataTable::progress/nodata should only show Loading if progressPending
 `;
 
 exports[`DataTable::progress/nodata should render correctly when a component is passed that is a react component 1`] = `
-.c3 {
+.c2 {
   position: relative;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
   width: 100%;
   height: 100%;
-  max-width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
 }
@@ -14738,14 +15254,14 @@ exports[`DataTable::progress/nodata should render correctly when a component is
   min-height: 0;
 }
 
-.c2 {
+.c3 {
   position: relative;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
 }
@@ -14778,14 +15294,14 @@ exports[`DataTable::progress/nodata should render correctly when a component is
 `;
 
 exports[`DataTable::progress/nodata should render correctly when a component is passed that is a string 1`] = `
-.c3 {
+.c2 {
   position: relative;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
   width: 100%;
   height: 100%;
-  max-width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
 }
@@ -14799,14 +15315,14 @@ exports[`DataTable::progress/nodata should render correctly when a component is
   min-height: 0;
 }
 
-.c2 {
+.c3 {
   position: relative;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
 }
@@ -14837,14 +15353,13 @@ exports[`DataTable::progress/nodata should render correctly when a component is
 `;
 
 exports[`DataTable::progress/nodata should render correctly when progressPending is false and there are no row items 1`] = `
-.c2 {
-  position: relative;
+.c3 {
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
   width: 100%;
   height: 100%;
-  max-width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
 }
@@ -14858,23 +15373,24 @@ exports[`DataTable::progress/nodata should render correctly when progressPending
   min-height: 0;
 }
 
-.c1 {
+.c2 {
   position: relative;
-  width: 100%;
-  display: table;
-}
-
-.c3 {
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
 }
 
+.c1 {
+  position: relative;
+  width: 100%;
+  display: table;
+}
+
 <div
   class="c0"
 >
@@ -14900,14 +15416,14 @@ exports[`DataTable::progress/nodata should render correctly when progressPending
 `;
 
 exports[`DataTable::progress/nodata should render correctly when progressPending is true 1`] = `
-.c3 {
+.c2 {
   position: relative;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
   width: 100%;
   height: 100%;
-  max-width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
 }
@@ -14921,14 +15437,14 @@ exports[`DataTable::progress/nodata should render correctly when progressPending
   min-height: 0;
 }
 
-.c2 {
+.c3 {
   position: relative;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
 }
@@ -14963,14 +15479,14 @@ exports[`DataTable::progress/nodata should render correctly when progressPending
 `;
 
 exports[`DataTable::progress/nodata when noTableHead should only Loading if progressPending prop changes 1`] = `
-.c2 {
+.c3 {
   position: relative;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
   width: 100%;
   height: 100%;
-  max-width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
 }
@@ -14984,14 +15500,14 @@ exports[`DataTable::progress/nodata when noTableHead should only Loading if prog
   min-height: 0;
 }
 
-.c3 {
+.c2 {
   position: relative;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
 }
@@ -15027,37 +15543,6 @@ exports[`DataTable::progress/nodata when noTableHead should only Loading if prog
 `;
 
 exports[`DataTable::progress/nodata when persistTableHead should disable TableHead if no data 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -15076,6 +15561,38 @@ exports[`DataTable::progress/nodata when persistTableHead should disable TableHe
   min-width: 100px;
 }
 
+.c9 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
 .c7 {
   display: inline-flex;
   align-items: center;
@@ -15093,30 +15610,29 @@ exports[`DataTable::progress/nodata when persistTableHead should disable TableHe
   text-overflow: ellipsis;
 }
 
-.c0 {
-  position: relative;
+.c3 {
+  display: flex;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c1 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  display: table;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
 }
 
-.c9 {
-  box-sizing: border-box;
+.c1 {
+  position: relative;
   width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
+  display: table;
 }
 
 <div
@@ -15174,37 +15690,6 @@ exports[`DataTable::progress/nodata when persistTableHead should disable TableHe
 `;
 
 exports[`DataTable::progress/nodata when persistTableHead should disable TableHead if progressPending 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -15223,6 +15708,39 @@ exports[`DataTable::progress/nodata when persistTableHead should disable TableHe
   min-width: 100px;
 }
 
+.c9 {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
 .c7 {
   display: inline-flex;
   align-items: center;
@@ -15240,25 +15758,23 @@ exports[`DataTable::progress/nodata when persistTableHead should disable TableHe
   text-overflow: ellipsis;
 }
 
-.c0 {
-  position: relative;
+.c3 {
+  display: flex;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c9 {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
+.c4 {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  color: rgba(0, 0, 0, 0.87);
+  align-items: stretch;
+  width: 100%;
   background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
 }
 
 .c1 {
@@ -15321,38 +15837,7 @@ exports[`DataTable::progress/nodata when persistTableHead should disable TableHe
 </div>
 `;
 
-exports[`DataTable::progress/nodata when persistTableHead should only Loading and TableHead if progressPending prop changes 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
+exports[`DataTable::progress/nodata when persistTableHead should only Loading and TableHead if progressPending prop changes 1`] = `
 .c5 {
   position: relative;
   display: flex;
@@ -15371,6 +15856,39 @@ exports[`DataTable::progress/nodata when persistTableHead should only Loading an
   min-width: 100px;
 }
 
+.c9 {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
 .c7 {
   display: inline-flex;
   align-items: center;
@@ -15388,25 +15906,23 @@ exports[`DataTable::progress/nodata when persistTableHead should only Loading an
   text-overflow: ellipsis;
 }
 
-.c0 {
-  position: relative;
+.c3 {
+  display: flex;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c9 {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
+.c4 {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  color: rgba(0, 0, 0, 0.87);
+  align-items: stretch;
+  width: 100%;
   background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
 }
 
 .c1 {
@@ -15470,37 +15986,6 @@ exports[`DataTable::progress/nodata when persistTableHead should only Loading an
 `;
 
 exports[`DataTable::responsive should render correctly responsive by default 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -15530,29 +16015,30 @@ exports[`DataTable::responsive should render correctly responsive by default 1`]
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -15572,18 +16058,48 @@ exports[`DataTable::responsive should render correctly responsive by default 1`]
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -15681,37 +16197,6 @@ exports[`DataTable::responsive should render correctly responsive by default 1`]
 `;
 
 exports[`DataTable::responsive should render correctly when responsive=false 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -15741,6 +16226,65 @@ exports[`DataTable::responsive should render correctly when responsive=false 1`]
   min-width: 100px;
 }
 
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c9 {
+  display: flex;
+  flex-direction: column;
+}
+
+.c7 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.c8 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
 .c12 div:first-child {
   white-space: nowrap;
   overflow: hidden;
@@ -15766,34 +16310,6 @@ exports[`DataTable::responsive should render correctly when responsive=false 1`]
   border-bottom-color: rgba(0,0,0,.12);
 }
 
-.c7 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: inherit;
-  height: 100%;
-  width: 100%;
-  outline: none;
-  user-select: none;
-  overflow: hidden;
-}
-
-.c8 {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.c9 {
-  display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-}
-
 .c1 {
   position: relative;
   width: 100%;
@@ -15889,37 +16405,6 @@ exports[`DataTable::responsive should render correctly when responsive=false 1`]
 `;
 
 exports[`DataTable::selectableRows should not render a select all checkbox when selectableRowsNoSelectAll is true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -15961,6 +16446,68 @@ exports[`DataTable::selectableRows should not render a select all checkbox when
   min-width: 100px;
 }
 
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c10 {
+  display: flex;
+  flex-direction: column;
+}
+
+.c8 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.c9 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
 .c14 div:first-child {
   white-space: nowrap;
   overflow: hidden;
@@ -15995,37 +16542,6 @@ exports[`DataTable::selectableRows should not render a select all checkbox when
   border-bottom-color: rgba(0,0,0,.12);
 }
 
-.c8 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: inherit;
-  height: 100%;
-  width: 100%;
-  outline: none;
-  user-select: none;
-  overflow: hidden;
-}
-
-.c9 {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.c10 {
-  display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
-}
-
 .c1 {
   position: relative;
   width: 100%;
@@ -16145,37 +16661,6 @@ exports[`DataTable::selectableRows should not render a select all checkbox when
 `;
 
 exports[`DataTable::selectableRows should render correctly when selectableRows is true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -16228,38 +16713,30 @@ exports[`DataTable::selectableRows should render correctly when selectableRows i
   min-width: 100px;
 }
 
-.c16 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c14 {
-  flex: 0 0 48px;
-  min-width: 48px;
-  justify-content: center;
-  align-items: center;
-  user-select: none;
-  white-space: nowrap;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c12 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c12:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c11 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c9 {
@@ -16273,33 +16750,72 @@ exports[`DataTable::selectableRows should render correctly when selectableRows i
   overflow: hidden;
 }
 
-.c10 {
-  overflow: hidden;
+.c10 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.c6 {
+  flex: 0 0 48px;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  white-space: nowrap;
+  font-size: unset;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c16 div:first-child {
   white-space: nowrap;
+  overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.c6 {
+.c14 {
   flex: 0 0 48px;
+  min-width: 48px;
   justify-content: center;
   align-items: center;
   user-select: none;
   white-space: nowrap;
-  font-size: unset;
 }
 
-.c11 {
+.c12 {
   display: flex;
-  flex-direction: column;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
 }
 
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+.c12:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -16427,37 +16943,6 @@ exports[`DataTable::selectableRows should render correctly when selectableRows i
 `;
 
 exports[`DataTable::selectableRows should render correctly when selectableRowsHighlight is true and a row is selected 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -16510,6 +16995,77 @@ exports[`DataTable::selectableRows should render correctly when selectableRowsHi
   min-width: 100px;
 }
 
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c11 {
+  display: flex;
+  flex-direction: column;
+}
+
+.c9 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.c10 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.c6 {
+  flex: 0 0 48px;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  white-space: nowrap;
+  font-size: unset;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
 .c16 div:first-child {
   white-space: nowrap;
   overflow: hidden;
@@ -16569,46 +17125,6 @@ exports[`DataTable::selectableRows should render correctly when selectableRowsHi
   border-bottom-color: #FFFFFF;
 }
 
-.c9 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: inherit;
-  height: 100%;
-  width: 100%;
-  outline: none;
-  user-select: none;
-  overflow: hidden;
-}
-
-.c10 {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.c6 {
-  flex: 0 0 48px;
-  justify-content: center;
-  align-items: center;
-  user-select: none;
-  white-space: nowrap;
-  font-size: unset;
-}
-
-.c11 {
-  display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
-}
-
 .c1 {
   position: relative;
   width: 100%;
@@ -16734,37 +17250,6 @@ exports[`DataTable::selectableRows should render correctly when selectableRowsHi
 `;
 
 exports[`DataTable::sorting a custom column sorting function is used 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -16794,29 +17279,30 @@ exports[`DataTable::sorting a custom column sorting function is used 1`] = `
   min-width: 100px;
 }
 
-.c13 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c11 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c11:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c10 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c9 {
@@ -16853,29 +17339,59 @@ exports[`DataTable::sorting a custom column sorting function is used 1`] = `
   transition-property: transform;
 }
 
-.c7 span.__rdt_custom_sort_icon__.asc i,
-.c7 span.__rdt_custom_sort_icon__.asc svg {
-  transform: rotate(180deg);
+.c7 span.__rdt_custom_sort_icon__.asc i,
+.c7 span.__rdt_custom_sort_icon__.asc svg {
+  transform: rotate(180deg);
+}
+
+.c8 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
 }
 
-.c8 {
-  overflow: hidden;
+.c13 div:first-child {
   white-space: nowrap;
+  overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.c10 {
+.c11 {
   display: flex;
-  flex-direction: column;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
 }
 
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+.c11:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -16977,37 +17493,6 @@ exports[`DataTable::sorting a custom column sorting function is used 1`] = `
 `;
 
 exports[`DataTable::sorting should render correctly and bypass internal sort when sortServer = true and asc sort 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -17037,29 +17522,30 @@ exports[`DataTable::sorting should render correctly and bypass internal sort whe
   min-width: 100px;
 }
 
-.c13 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c11 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c11:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c10 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c9 {
@@ -17107,18 +17593,48 @@ exports[`DataTable::sorting should render correctly and bypass internal sort whe
   text-overflow: ellipsis;
 }
 
-.c10 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c13 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c11 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c11:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -17220,37 +17736,6 @@ exports[`DataTable::sorting should render correctly and bypass internal sort whe
 `;
 
 exports[`DataTable::sorting should render correctly and bypass internal sort when sortServer = true and desc sort 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -17280,29 +17765,30 @@ exports[`DataTable::sorting should render correctly and bypass internal sort whe
   min-width: 100px;
 }
 
-.c13 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c11 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c11:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c10 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c9 {
@@ -17350,18 +17836,48 @@ exports[`DataTable::sorting should render correctly and bypass internal sort whe
   text-overflow: ellipsis;
 }
 
-.c10 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c13 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c11 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c11:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -17463,37 +17979,6 @@ exports[`DataTable::sorting should render correctly and bypass internal sort whe
 `;
 
 exports[`DataTable::sorting should render correctly and not be sorted when a column.sort === false 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -17523,29 +18008,30 @@ exports[`DataTable::sorting should render correctly and not be sorted when a col
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -17565,18 +18051,48 @@ exports[`DataTable::sorting should render correctly and not be sorted when a col
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -17674,37 +18190,6 @@ exports[`DataTable::sorting should render correctly and not be sorted when a col
 `;
 
 exports[`DataTable::sorting should render correctly when a column is sorted from asc to desc 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -17734,29 +18219,30 @@ exports[`DataTable::sorting should render correctly when a column is sorted from
   min-width: 100px;
 }
 
-.c13 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c11 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c11:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c10 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c9 {
@@ -17804,18 +18290,48 @@ exports[`DataTable::sorting should render correctly when a column is sorted from
   text-overflow: ellipsis;
 }
 
-.c10 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c13 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c11 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c11:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -17907,47 +18423,16 @@ exports[`DataTable::sorting should render correctly when a column is sorted from
               data-tag="allowRowEvents"
             >
               Zuchinni
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`DataTable::sorting should render correctly when a column is sorted in default asc 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
 
+exports[`DataTable::sorting should render correctly when a column is sorted in default asc 1`] = `
 .c5 {
   position: relative;
   display: flex;
@@ -17977,29 +18462,30 @@ exports[`DataTable::sorting should render correctly when a column is sorted in d
   min-width: 100px;
 }
 
-.c13 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c11 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c11:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c10 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c9 {
@@ -18047,18 +18533,48 @@ exports[`DataTable::sorting should render correctly when a column is sorted in d
   text-overflow: ellipsis;
 }
 
-.c10 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c13 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c11 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c11:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -18160,37 +18676,6 @@ exports[`DataTable::sorting should render correctly when a column is sorted in d
 `;
 
 exports[`DataTable::sorting should render correctly with a custom sortIcon 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -18220,29 +18705,30 @@ exports[`DataTable::sorting should render correctly with a custom sortIcon 1`] =
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -18294,18 +18780,48 @@ exports[`DataTable::sorting should render correctly with a custom sortIcon 1`] =
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -18409,37 +18925,6 @@ exports[`DataTable::sorting should render correctly with a custom sortIcon 1`] =
 `;
 
 exports[`DataTable::sorting should render correctly with a custom sortIcon and column.right = true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -18470,29 +18955,30 @@ exports[`DataTable::sorting should render correctly with a custom sortIcon and c
   justify-content: flex-end;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -18544,18 +19030,48 @@ exports[`DataTable::sorting should render correctly with a custom sortIcon and c
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -18659,37 +19175,6 @@ exports[`DataTable::sorting should render correctly with a custom sortIcon and c
 `;
 
 exports[`DataTable::sorting should render correctly with a default sort field and the icon to the right when column.right = true and the native sort icon 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -18720,29 +19205,30 @@ exports[`DataTable::sorting should render correctly with a default sort field an
   justify-content: flex-end;
 }
 
-.c13 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c11 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c11:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c10 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c8 {
@@ -18802,18 +19288,48 @@ exports[`DataTable::sorting should render correctly with a default sort field an
   text-overflow: ellipsis;
 }
 
-.c10 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c13 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c11 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c11:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -18915,37 +19431,6 @@ exports[`DataTable::sorting should render correctly with a default sort field an
 `;
 
 exports[`DataTable::sorting should render correctly with a default sort field and the native sort icon 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -18975,29 +19460,30 @@ exports[`DataTable::sorting should render correctly with a default sort field an
   min-width: 100px;
 }
 
-.c13 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c11 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c11:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c10 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c9 {
@@ -19057,18 +19543,48 @@ exports[`DataTable::sorting should render correctly with a default sort field an
   text-overflow: ellipsis;
 }
 
-.c10 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c13 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c11 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c11:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -19170,37 +19686,6 @@ exports[`DataTable::sorting should render correctly with a default sort field an
 `;
 
 exports[`DataTable::sorting should render correctly with a defaultSortAsc = false 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -19230,29 +19715,30 @@ exports[`DataTable::sorting should render correctly with a defaultSortAsc = fals
   min-width: 100px;
 }
 
-.c13 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c11 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c11:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c10 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c9 {
@@ -19313,18 +19799,48 @@ exports[`DataTable::sorting should render correctly with a defaultSortAsc = fals
   text-overflow: ellipsis;
 }
 
-.c10 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c13 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c11 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c11:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -19426,37 +19942,6 @@ exports[`DataTable::sorting should render correctly with a defaultSortAsc = fals
 `;
 
 exports[`DataTable::sorting should sort if the column is selected and the Enter key is pressed 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -19486,29 +19971,30 @@ exports[`DataTable::sorting should sort if the column is selected and the Enter
   min-width: 100px;
 }
 
-.c13 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c11 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c11:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c10 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c9 {
@@ -19557,18 +20043,48 @@ exports[`DataTable::sorting should sort if the column is selected and the Enter
   text-overflow: ellipsis;
 }
 
-.c10 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c13 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c11 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c11:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -19669,7 +20185,45 @@ exports[`DataTable::sorting should sort if the column is selected and the Enter
 </div>
 `;
 
-exports[`DataTable::striped should render correctly when striped 1`] = `
+exports[`DataTable::striped should render correctly when striped 1`] = `
+.c5 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  line-height: normal;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.c11 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  line-height: normal;
+  padding-left: 16px;
+  padding-right: 16px;
+  word-break: break-word;
+}
+
+.c6 {
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
+  max-width: 100%;
+  min-width: 100px;
+}
+
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
 .c2 {
   position: relative;
   box-sizing: border-box;
@@ -19682,6 +20236,28 @@ exports[`DataTable::striped should render correctly when striped 1`] = `
   background-color: #FFFFFF;
 }
 
+.c9 {
+  display: flex;
+  flex-direction: column;
+}
+
+.c7 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.c8 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .c3 {
   display: flex;
   width: 100%;
@@ -19701,35 +20277,6 @@ exports[`DataTable::striped should render correctly when striped 1`] = `
   border-bottom-style: solid;
 }
 
-.c5 {
-  position: relative;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  line-height: normal;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.c11 {
-  position: relative;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  line-height: normal;
-  padding-left: 16px;
-  padding-right: 16px;
-  word-break: break-word;
-}
-
-.c6 {
-  flex-grow: 1;
-  flex-shrink: 0;
-  flex-basis: 0;
-  max-width: 100%;
-  min-width: 100px;
-}
-
 .c12 div:first-child {
   white-space: nowrap;
   overflow: hidden;
@@ -19776,37 +20323,6 @@ exports[`DataTable::striped should render correctly when striped 1`] = `
   border-bottom-color: rgba(0,0,0,.12);
 }
 
-.c7 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: inherit;
-  height: 100%;
-  width: 100%;
-  outline: none;
-  user-select: none;
-  overflow: hidden;
-}
-
-.c8 {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.c9 {
-  display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
-}
-
 .c1 {
   position: relative;
   width: 100%;
@@ -20017,37 +20533,6 @@ exports[`DataTable::subHeader should render when subHeaderWrap is false 1`] = `
 `;
 
 exports[`data prop changes should update state if the data prop changes 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -20077,29 +20562,30 @@ exports[`data prop changes should update state if the data prop changes 1`] = `
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -20119,18 +20605,48 @@ exports[`data prop changes should update state if the data prop changes 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -20209,18 +20725,6 @@ exports[`data prop changes should update state if the data prop changes 1`] = `
 `;
 
 exports[`should not show the TableHead when noTableHead is true 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -20240,6 +20744,32 @@ exports[`should not show the TableHead when noTableHead is true 1`] = `
   min-width: 100px;
 }
 
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c3 {
+  display: flex;
+  flex-direction: column;
+}
+
 .c7 div:first-child {
   white-space: nowrap;
   overflow: hidden;
@@ -20255,28 +20785,14 @@ exports[`should not show the TableHead when noTableHead is true 1`] = `
   font-size: 13px;
   font-weight: 400;
   color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-  min-height: 48px;
-}
-
-.c4:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-}
-
-.c3 {
-  display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c4:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -20344,14 +20860,13 @@ exports[`should not show the TableHead when noTableHead is true 1`] = `
 `;
 
 exports[`should render and empty table correctly 1`] = `
-.c2 {
-  position: relative;
+.c3 {
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
   width: 100%;
   height: 100%;
-  max-width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
 }
@@ -20365,23 +20880,24 @@ exports[`should render and empty table correctly 1`] = `
   min-height: 0;
 }
 
-.c1 {
+.c2 {
   position: relative;
-  width: 100%;
-  display: table;
-}
-
-.c3 {
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
 }
 
+.c1 {
+  position: relative;
+  width: 100%;
+  display: table;
+}
+
 <div
   class="c0"
 >
@@ -20407,37 +20923,6 @@ exports[`should render and empty table correctly 1`] = `
 `;
 
 exports[`should render correctly when conditionalRowStyles is used with an expandableRows an expandableInheritConditionalStyles 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -20479,6 +20964,73 @@ exports[`should render correctly when conditionalRowStyles is used with an expan
   min-width: 100px;
 }
 
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c11 {
+  display: flex;
+  flex-direction: column;
+}
+
+.c9 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.c10 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.c6 {
+  white-space: nowrap;
+  flex: 0 0 48px;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
 .c16 div:first-child {
   white-space: nowrap;
   overflow: hidden;
@@ -20587,48 +21139,12 @@ exports[`should render correctly when conditionalRowStyles is used with an expan
   border-bottom-color: rgba(0,0,0,.12);
 }
 
-.c9 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: inherit;
-  height: 100%;
-  width: 100%;
-  outline: none;
-  user-select: none;
-  overflow: hidden;
-}
-
-.c10 {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.c11 {
-  display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
-}
-
 .c1 {
   position: relative;
   width: 100%;
   display: table;
 }
 
-.c6 {
-  white-space: nowrap;
-  flex: 0 0 48px;
-}
-
 <div
   class="c0"
 >
@@ -20788,37 +21304,6 @@ exports[`should render correctly when conditionalRowStyles is used with an expan
 `;
 
 exports[`should render correctly when conditionalRowStyles is used with an expandableRows an expandableInheritConditionalStyles with classNames instead of style 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -20852,12 +21337,79 @@ exports[`should render correctly when conditionalRowStyles is used with an expan
   padding: 0;
 }
 
-.c8 {
-  flex-grow: 1;
-  flex-shrink: 0;
-  flex-basis: 0;
-  max-width: 100%;
-  min-width: 100px;
+.c8 {
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
+  max-width: 100%;
+  min-width: 100px;
+}
+
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c11 {
+  display: flex;
+  flex-direction: column;
+}
+
+.c9 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.c10 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.c6 {
+  white-space: nowrap;
+  flex: 0 0 48px;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
 }
 
 .c16 div:first-child {
@@ -20937,48 +21489,12 @@ exports[`should render correctly when conditionalRowStyles is used with an expan
   border-bottom-color: rgba(0,0,0,.12);
 }
 
-.c9 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: inherit;
-  height: 100%;
-  width: 100%;
-  outline: none;
-  user-select: none;
-  overflow: hidden;
-}
-
-.c10 {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.c11 {
-  display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
-}
-
 .c1 {
   position: relative;
   width: 100%;
   display: table;
 }
 
-.c6 {
-  white-space: nowrap;
-  flex: 0 0 48px;
-}
-
 <div
   class="c0"
 >
@@ -21138,37 +21654,6 @@ exports[`should render correctly when conditionalRowStyles is used with an expan
 `;
 
 exports[`should render correctly when conditionalRowStyles with classNames is used and there is a match 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -21198,29 +21683,30 @@ exports[`should render correctly when conditionalRowStyles with classNames is us
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -21240,18 +21726,48 @@ exports[`should render correctly when conditionalRowStyles with classNames is us
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -21349,39 +21865,6 @@ exports[`should render correctly when conditionalRowStyles with classNames is us
 `;
 
 exports[`should render correctly when disabled 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  pointer-events: none;
-  opacity: 0.4;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -21411,6 +21894,70 @@ exports[`should render correctly when disabled 1`] = `
   min-width: 100px;
 }
 
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
+}
+
+.c2 {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  pointer-events: none;
+  opacity: 0.4;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+}
+
+.c9 {
+  display: flex;
+  flex-direction: column;
+}
+
+.c7 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.c8 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.c3 {
+  display: flex;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c4 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
 .c12 div:first-child {
   white-space: nowrap;
   overflow: hidden;
@@ -21436,37 +21983,6 @@ exports[`should render correctly when disabled 1`] = `
   border-bottom-color: rgba(0,0,0,.12);
 }
 
-.c7 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: inherit;
-  height: 100%;
-  width: 100%;
-  outline: none;
-  user-select: none;
-  overflow: hidden;
-}
-
-.c8 {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.c9 {
-  display: flex;
-  flex-direction: column;
-}
-
-.c0 {
-  position: relative;
-  width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
-}
-
 .c1 {
   position: relative;
   width: 100%;
@@ -21563,37 +22079,6 @@ exports[`should render correctly when disabled 1`] = `
 `;
 
 exports[`should render the correctly when using selector function 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -21623,29 +22108,30 @@ exports[`should render the correctly when using selector function 1`] = `
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -21665,18 +22151,48 @@ exports[`should render the correctly when using selector function 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
@@ -21755,37 +22271,6 @@ exports[`should render the correctly when using selector function 1`] = `
 `;
 
 exports[`should render the correctly when using selector function and a format function 1`] = `
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #FFFFFF;
-}
-
-.c3 {
-  display: flex;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.c4 {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  background-color: #FFFFFF;
-  min-height: 52px;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-  border-bottom-style: solid;
-}
-
 .c5 {
   position: relative;
   display: flex;
@@ -21815,29 +22300,30 @@ exports[`should render the correctly when using selector function and a format f
   min-width: 100px;
 }
 
-.c12 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.c0 {
+  position: relative;
+  width: 100%;
+  border-radius: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 0;
 }
 
-.c10 {
+.c2 {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
-  align-items: stretch;
-  align-content: stretch;
+  flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
+  height: 100%;
+  max-width: 100%;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
-  min-height: 48px;
 }
 
-.c10:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
+.c9 {
+  display: flex;
+  flex-direction: column;
 }
 
 .c7 {
@@ -21857,18 +22343,48 @@ exports[`should render the correctly when using selector function and a format f
   text-overflow: ellipsis;
 }
 
-.c9 {
+.c3 {
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.c0 {
-  position: relative;
+.c4 {
+  display: flex;
+  align-items: stretch;
   width: 100%;
-  border-radius: inherit;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 0;
+  background-color: #FFFFFF;
+  min-height: 52px;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+  border-bottom-style: solid;
+}
+
+.c12 div:first-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.c10 {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
+}
+
+.c10:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
 }
 
 .c1 {
diff --git a/src/DataTable/defaultProps.tsx b/src/DataTable/defaultProps.tsx
index 3908f027..9fc14c26 100644
--- a/src/DataTable/defaultProps.tsx
+++ b/src/DataTable/defaultProps.tsx
@@ -70,6 +70,7 @@ export const defaultProps = {
 	subHeaderComponent: null,
 	fixedHeader: false,
 	fixedHeaderScrollHeight: '100vh',
+	showFooter: false,
 	pagination: false,
 	paginationServer: false,
 	paginationServerOptions: {
diff --git a/src/DataTable/styles.ts b/src/DataTable/styles.ts
index 19497d7b..bd33fbd5 100644
--- a/src/DataTable/styles.ts
+++ b/src/DataTable/styles.ts
@@ -164,6 +164,25 @@ export const defaultStyles = (theme: Theme): TableStyles => ({
 			},
 		},
 	},
+	foot: {
+		style: {
+			color: theme.text.primary,
+			fontSize: '12px',
+			fontWeight: 500,
+		},
+	},
+	footRow: {
+		style: {
+			backgroundColor: theme.background.default,
+			minHeight: '52px',
+			borderTopWidth: '1px',
+			borderTopColor: theme.divider.default,
+			borderTopStyle: 'solid',
+		},
+		denseStyle: {
+			minHeight: '32px',
+		},
+	},
 	pagination: {
 		style: {
 			color: theme.text.secondary,
diff --git a/src/DataTable/types.ts b/src/DataTable/types.ts
index 66a7ecb9..7b60d992 100644
--- a/src/DataTable/types.ts
+++ b/src/DataTable/types.ts
@@ -12,6 +12,7 @@ export type ExpandRowToggled<T> = (expanded: boolean, row: T) => void;
 export type Format<T> = (row: T, rowIndex: number) => React.ReactNode;
 export type RowState<T> = ((row: T) => boolean) | null;
 export type Selector<T> = (row: T, rowIndex?: number) => Primitive;
+export type FooterContent<T> = (rows: T[]) => Primitive;
 export type SortFunction<T> = (rows: T[], field: Selector<T>, sortDirection: SortOrder) => T[];
 export type TableRow = Record<string, unknown>;
 export type ComponentProps = Record<string, unknown>;
@@ -62,6 +63,7 @@ export type TableProps<T> = {
 	noDataComponent?: React.ReactNode;
 	noHeader?: boolean;
 	noTableHead?: boolean;
+	showFooter?: boolean;
 	onChangePage?: PaginationChangePage;
 	onChangeRowsPerPage?: PaginationChangeRowsPerPage;
 	onRowClicked?: (row: T, e: React.MouseEvent) => void;
@@ -144,6 +146,7 @@ export interface TableColumn<T> extends TableColumnBase {
 	conditionalCellStyles?: ConditionalStyles<T>[];
 	format?: Format<T> | undefined;
 	selector?: Selector<T>;
+	footerContent?: FooterContent<T>;
 	sortFunction?: ColumnSortFunction<T>;
 }
 
@@ -180,6 +183,13 @@ export interface TableStyles {
 		style?: CSSObject;
 		draggingStyle?: CSSObject;
 	};
+	foot?: {
+		style: CSSObject;
+	};
+	footRow?: {
+		style: CSSObject;
+		denseStyle?: CSSObject;
+	};
 	contextMenu?: {
 		style?: CSSObject;
 		activeStyle?: CSSObject;
diff --git a/src/DataTable/util.ts b/src/DataTable/util.ts
index 14500294..dbe661f9 100644
--- a/src/DataTable/util.ts
+++ b/src/DataTable/util.ts
@@ -1,5 +1,14 @@
 import { CSSObject } from 'styled-components';
-import { ConditionalStyles, TableColumn, Format, TableRow, Selector, SortOrder, SortFunction } from './types';
+import {
+	ConditionalStyles,
+	FooterContent,
+	Format,
+	Selector,
+	SortFunction,
+	SortOrder,
+	TableColumn,
+	TableRow,
+} from './types';
 
 export function prop<T, K extends keyof T>(obj: T, key: K): T[K] {
 	return obj[key];
@@ -56,6 +65,14 @@ export function sort<T>(
 	});
 }
 
+export function getFooterProperty<T>(rows: T[], footerContent: FooterContent<T> | undefined | null): React.ReactNode {
+	if (!footerContent) {
+		return null;
+	}
+
+	return footerContent(rows);
+}
+
 export function getProperty<T>(
 	row: T,
 	// TODO: remove string type in V8
diff --git a/stories/DataTable/Footer.stories.js b/stories/DataTable/Footer.stories.js
new file mode 100644
index 00000000..8afe2e17
--- /dev/null
+++ b/stories/DataTable/Footer.stories.js
@@ -0,0 +1,97 @@
+import React from 'react';
+import tableDataItems from '../constants/sampleDesserts';
+import DataTable from '../../src/index';
+
+const columns = [
+	{
+		name: 'Name',
+		selector: row => row.name,
+		sortable: true,
+		fixed: true,
+	},
+	{
+		name: 'Type',
+		selector: row => row.type,
+		sortable: true,
+		fixed: true,
+	},
+	{
+		name: 'Calories (g)',
+		selector: row => row.calories,
+		sortable: true,
+		right: true,
+		footerContent: rows => {
+			const total = rows.reduce((acc, row) => acc + row.calories, 0);
+			return Math.round(total);
+		},
+	},
+	{
+		name: 'Fat (g)',
+		selector: row => row.fat,
+		sortable: true,
+		right: true,
+		footerContent: rows => {
+			const total = rows.reduce((acc, row) => acc + row.fat, 0);
+			return Math.round(total);
+		},
+	},
+	{
+		name: 'Carbs (g)',
+		selector: row => row.carbs,
+		sortable: true,
+		right: true,
+		footerContent: rows => {
+			const total = rows.reduce((acc, row) => acc + row.carbs, 0);
+			return Math.round(total);
+		},
+	},
+	{
+		name: 'Protein (g)',
+		selector: row => row.protein,
+		sortable: true,
+		right: true,
+		footerContent: rows => {
+			const total = rows.reduce((acc, row) => acc + row.protein, 0);
+			return Math.round(total);
+		},
+	},
+	{
+		name: 'Sodium (mg)',
+		selector: row => row.sodium,
+		sortable: true,
+		right: true,
+		footerContent: rows => {
+			const total = rows.reduce((acc, row) => acc + row.sodium, 0);
+			return Math.round(total);
+		},
+	},
+	{
+		name: 'Calcium (%)',
+		selector: row => row.calcium,
+		sortable: true,
+		right: true,
+		footerContent: rows => {
+			const total = rows.reduce((acc, row) => acc + row.calcium, 0);
+			return Math.round(total);
+		},
+	},
+	{
+		name: 'Iron (%)',
+		selector: row => row.iron,
+		sortable: true,
+		right: true,
+		footerContent: rows => {
+			const total = rows.reduce((acc, row) => acc + row.iron, 0);
+			return Math.round(total);
+		},
+	},
+];
+
+export const Footer = () => {
+	return <DataTable title="Movie List" columns={columns} data={tableDataItems} showFooter />;
+};
+
+export default {
+	title: 'Footer/Basic',
+	component: Footer,
+};