add container styles

Author: mckervinc

example/package.json

@@ -7,35 +7,36 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "start": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ngneat/falso": "^7.1.1",
+    "@ngneat/falso": "^7.2.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-fluid-table": "link:..",
-    "react-router-dom": "^6.16.0",
+    "react-router-dom": "^6.23.1",
     "react-syntax-highlighter": "^15.5.0",
     "semantic-ui-css": "^2.5.0",
-    "semantic-ui-react": "^2.1.4",
-    "styled-components": "^6.0.8"
+    "semantic-ui-react": "^2.1.5",
+    "styled-components": "^6.1.11"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.199",
+    "@types/lodash": "^4.17.4",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
-    "@types/react-syntax-highlighter": "^15.5.7",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "@vitejs/plugin-react": "^4.3.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11"
   },
   "volta": {
     "node": "18.17.0",

example/src/Props.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from "react";
 import { Table as BaseTable, ColumnProps } from "react-fluid-table";
 import { Divider, Header, Icon, List } from "semantic-ui-react";
@@ -6,6 +7,16 @@ import ColumnPropsTable from "./ColumnProps";
 import { Snippet } from "./Snippet";
 import { InlineCode } from "./components/library/InlineCode";
 
+interface PropData {
+  prop: string;
+  type: string;
+  description: string;
+  required?: boolean;
+  content?: () => React.ReactNode;
+  expandedType?: () => React.ReactNode;
+  default?: string | number;
+}
+
 const Container = styled.div`
   padding: 1em;
   background-color: white;
@@ -38,16 +49,6 @@ const Item = styled(List.Item)`
   width: 100%;
 `;
 
-interface PropData {
-  prop: string;
-  type: string;
-  description: string;
-  required?: boolean;
-  content?: () => React.ReactNode;
-  expandedType?: () => React.ReactNode;
-  default?: string | number;
-}
-
 const columns: ColumnProps<PropData>[] = [
   {
     key: "prop",
@@ -77,7 +78,7 @@ const columns: ColumnProps<PropData>[] = [
     key: "default",
     header: "Default",
     width: 100,
-    content: ({ row }: { row: PropData }) => (row.default ? <code>{row.default}</code> : null)
+    content: ({ row }) => (row.default ? <code>{row.default}</code> : null)
   },
   {
     key: "description",
@@ -217,6 +218,18 @@ const data: PropData[] = [
     description:
       "Add custom css className to each row element. One can also pass in a function that takes in the row number in order to provide custom styling for particular rows."
   },
+  {
+    prop: "rowContainerStyle",
+    type: "object | (index: number) => object",
+    description:
+      "Add custom css styles to each row container element. One can also pass in a function that takes in the row number in order to provide custom styling for particular rows."
+  },
+  {
+    prop: "rowContainerClassname",
+    type: "string | (index: number) => string",
+    description:
+      "Add custom css className to each row container element. One can also pass in a function that takes in the row number in order to provide custom styling for particular rows."
+  },
   {
     prop: "subComponent",
     type: "Element",
@@ -337,7 +350,7 @@ const Props = () => (
         </Header.Subheader>
       </Header.Content>
     </Header>
-    <Table borders data={data} columns={columns} tableHeight={500} />
+    <Table borders data={data} columns={columns as unknown as any[]} tableHeight={500} />
     <Divider section />
     <Header dividing color="red">
       Required Props
@@ -692,6 +705,16 @@ interface TableProps<T> {
    * a function that takes the index of the row and returns an object.
    */
   rowClassname?: string | ((index: number) => string);
+  /**
+   * React styles used for customizing each row container. Could be an object or
+   * a function that takes the index of the row and returns an object.
+   */
+  rowContainerStyle?: CSSProperties | ((index: number) => CSSProperties);
+  /**
+   * React className used for customizing each row container. Could be an object or
+   * a function that takes the index of the row and returns an object.
+   */
+  rowContainerClassname?: string | ((index: number) => string);
   /**
    * React styles used for customizing the footer.
    */