chore: added new prop datatable

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govconnex/ui",
-  "version": "0.0.172",
+  "version": "0.0.173",
   "description": "GovConnex UI - React Component Library",
   "scripts": {
     "build:tokens": "./tokens-build.sh",

src/components/DataTable/DataTable.stories.tsx

@@ -459,3 +459,14 @@ WithMaxHeight.args = {
   fullWidth: true,
   maxHeight: 150,
 };
+
+export const WithInnerWrapperCs = Template.bind({});
+WithInnerWrapperCs.args = {
+  data: DATA_TABLE_DATA,
+  columns: DATA_TABLE_COLUMNS,
+  pageSize: 25,
+  page: 1,
+  numResults: 100,
+  fullWidth: true,
+  innerWrapperCs: {height: "600px", background: "red"},
+};

src/components/DataTable/DataTable.styles.ts

@@ -2,6 +2,7 @@ import styled from "styled-components";
 import Icon from "../Icon";
 import Menu from "../Menu";
 import Pagination from "../Pagination";
+import {addCustomStyles} from "../../core/styleFunctions";
 
 export const GcxDataTableRoot = styled.div``;
 export const GcxDataTableWrapper = styled.div<{fullWidth?: boolean}>`
@@ -13,9 +14,11 @@ export const GcxDataTableWrapper = styled.div<{fullWidth?: boolean}>`
   width: ${(p) => (p.fullWidth ? "100%" : "auto")};
   background: ${(p) => p.theme.primary.base.white};
 `;
-export const GxcDataTableInnerWrapper = styled.div<{maxHeight?: number}>`
+export const GxcDataTableInnerWrapper = styled.div<{maxHeight?: number; cs?: any}>`
   overflow: auto;
   max-height: ${(p) => (p.maxHeight !== undefined ? `${p.maxHeight}px` : "auto")};
+
+  ${(p) => addCustomStyles(p)};
 `;
 export const GcxDataTable = styled.table<{fullWidth?: boolean}>`
   display: table;

src/components/DataTable/DataTable.tsx

@@ -27,6 +27,7 @@ import {
 import DataTableDataCell from "./DataTableDataCell";
 import DataTableHeaderCell from "./DataTableHeaderCell";
 import {MenuOption, MenuProps} from "../Menu/Menu";
+import {customStyles} from "../../core/styleFunctions";
 
 export interface DataTableProps {
   /**
@@ -109,6 +110,11 @@ export interface DataTableProps {
    * Padding for pagination menu to flip.
    */
   paddingForFlipPaginationMenu?: number;
+
+  /**
+   * Custom styles for inner wrapper.
+   */
+  innerWrapperCs?: customStyles;
 }
 
 export interface DataTableActionRowProps {
@@ -143,6 +149,7 @@ const DataTable = ({
   onRowClick,
   maxHeight,
   paddingForFlipPaginationMenu,
+  innerWrapperCs,
 }: DataTableProps) => {
   const manualSortBy = !!onChangeSort;
   const manualPagination = !!onPaginationChangeProp;
@@ -277,7 +284,7 @@ const DataTable = ({
   return (
     <GcxDataTableRoot className={classNames(className)}>
       <GcxDataTableWrapper fullWidth={fullWidth}>
-        <GxcDataTableInnerWrapper maxHeight={maxHeight}>
+        <GxcDataTableInnerWrapper maxHeight={maxHeight} cs={innerWrapperCs}>
           <GcxDataTable fullWidth={fullWidth} {...getTableProps()}>
             <GcxDataTableThead>
               {headerGroups.map((headerGroup: any) => (