Merge pull request #81 from mckervinc/feature/footer

update footer props

.npmignore

@@ -34,3 +34,4 @@ rollup.config.js
 .env.test.local
 .env.production.local
 .travis.yml
+.github

CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## 0.4.6
+
+_2023-09-28_
+
+### Features
+
+- added `minTableHeight` and `maxTableHeight`
+- added footer styling with `footerStyle` and `footerClassname`
+- expose column widths to `footerComponent` to help expose widths
+
 ## 0.4.5
 
 _2023-09-27_

example/src/Props.tsx

@@ -121,6 +121,17 @@ const data: PropData[] = [
     description:
       "The height of the table in pixels. If no height is specified, this will try to fill the height of the parent. If the parent node does not have a height specified, a height for the table will be calculated based on the default header height and the rowHeight or the defaultRowHeight (37)."
   },
+  {
+    prop: "minTableHeight",
+    type: "number",
+    description: "The min height of the table in pixels."
+  },
+  {
+    prop: "maxTableHeight",
+    type: "number",
+    description:
+      "The max height of the table in pixels. If tableHeight is specified, this is ignored."
+  },
   {
     prop: "tableWidth",
     type: "number",
@@ -179,7 +190,7 @@ const data: PropData[] = [
   },
   {
     prop: "headerClassname",
-    type: "object",
+    type: "string",
     description: "Add custom css className to the table header"
   },
   {
@@ -212,9 +223,19 @@ const data: PropData[] = [
   },
   {
     prop: "footerComponent",
-    type: "() => Element",
+    type: "(props: FooterProps) => Element",
     description: "You can provide an optional footer"
   },
+  {
+    prop: "footerStyle",
+    type: "object",
+    description: "Add custom css styles to the table footer"
+  },
+  {
+    prop: "footerClassname",
+    type: "string",
+    description: "Add custom css className to the table footer"
+  },
   {
     prop: "stickyFooter",
     type: "boolean",
@@ -266,7 +287,7 @@ const Contact = ({ row, index, style, clearSizeCache }) => {
     mounted.current = true;
   }, [showInfo]);
 
-  return <Accordion label={label} options={options} onChange={onChange} />;
+  return <Accordion style={style} label={label} options={options} onChange={onChange} />;
 };
 
 const columns = [{
@@ -336,7 +357,7 @@ const Props = () => (
           The HeaderElement is an element that takes in props that contains a style, onclick, and
           sortDirection. See below for an example:
         </List.Content>
-        <Snippet copy={false} edit={false} code={headerSnippet} />
+        <Snippet copy={false} code={headerSnippet} />
       </Item>
       <Item>
         <List.Header>
@@ -352,7 +373,7 @@ const Props = () => (
           index in the data array, and a function to reset the rowHeight (if needed). See below for
           an example:
         </List.Content>
-        <Snippet copy={false} edit={false} code={cellSnippet} />
+        <Snippet copy={false} code={cellSnippet} />
       </Item>
       <Item>
         <List.Header>
@@ -363,7 +384,7 @@ const Props = () => (
           The ExpandedElement is an element that takes in props that contains whether or not the row
           is expanded, as well as a function to toggle the row expansion. See below for an example:
         </List.Content>
-        <Snippet copy={false} edit={false} code={expanderSnippet} />
+        <Snippet copy={false} code={expanderSnippet} />
       </Item>
     </List>
     <Header dividing size="small" color="grey">

example/src/Snippet.tsx

@@ -1,12 +1,12 @@
 import { useRef, useState } from "react";
 import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
-import jsx from "react-syntax-highlighter/dist/esm/languages/prism/jsx";
+import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
 import okaidia from "react-syntax-highlighter/dist/esm/styles/prism/okaidia";
 import { Icon, Menu, Popup } from "semantic-ui-react";
 import styled from "styled-components";
 import { copy } from "./util";
 
-SyntaxHighlighter.registerLanguage("jsx", jsx);
+SyntaxHighlighter.registerLanguage("tsx", tsx);
 
 const Container = styled.div`
   position: relative;
@@ -56,7 +56,7 @@ interface SnippetProps {
   edit?: boolean;
 }
 
-const Snippet = ({ code, copy: showCopy = true, edit = true }: SnippetProps) => {
+const Snippet = ({ code, copy: showCopy = true, edit = false }: SnippetProps) => {
   const ref = useRef(0);
   const [open, setOpen] = useState(false);
   const onOpen = () => {
@@ -98,7 +98,7 @@ const Snippet = ({ code, copy: showCopy = true, edit = true }: SnippetProps) =>
           </MenuItem>
         )}
       </Group>
-      <Highligher language="jsx" style={okaidia}>
+      <Highligher language="tsx" style={okaidia}>
         {code.trim()}
       </Highligher>
     </Container>

example/src/examples/04-custom.tsx

@@ -336,29 +336,29 @@ const columns: ColumnProps<TestData>[] = [
     key: "avatar",
     header: "Profile Photo",
     width: 150,
-    content: ({ row}) => <ProfPic size="small" src={row.avatar} />
+    content: ({ row }) => <ProfPic size="small" src={row.avatar} />
   },
   {
     key: "email",
     header: "Email",
-    content: ({ row}) => <Email email={row.email} />
+    content: ({ row }) => <Email email={row.email} />
   },
   {
     key: "firstName",
     header: "First",
     width: 100,
-    content: ({ row}) => <TextStyle>{row.firstName}</TextStyle>
+    content: ({ row }) => <TextStyle>{row.firstName}</TextStyle>
   },
   {
     key: "lastName",
     header: "Last",
     width: 100,
-    content: ({ row}) => <TextStyle>{row.lastName}</TextStyle>
+    content: ({ row }) => <TextStyle>{row.lastName}</TextStyle>
   },
   {
     key: "country",
     header: "Country",
-    content: ({ row}) =>
+    content: ({ row }) =>
       !countryMap[row.country] ? (
         \`No flag for this country: \${row.country.toUpperCase()}\`
       ) : (

example/src/examples/10-footer.tsx

@@ -19,49 +19,54 @@ const columns: ColumnProps<TestData>[] = [
   {
     key: "id",
     header: "ID",
-    sortable: true,
     width: 50
   },
   {
     key: "firstName",
     header: "First",
-    sortable: true,
     width: 120
   },
   {
     key: "lastName",
     header: "Last",
-    sortable: true,
     width: 120
   },
   {
     key: "email",
     header: "Email",
-    sortable: true,
     width: 250
   }
 ];
 
 const Footer = styled.div`
   background-color: white;
-  padding: 8px;
 `;
 
 const Example10 = () => {
   // hooks
   const [sticky, setSticky] = useState(true);
+  const [simple, setSimple] = useState(true);
 
   return (
     <>
       <Grid stackable columns={2}>
         <Grid.Row>
           <Grid.Column width={8}>
             <Form>
-              <h4>Change footer stickyness</h4>
+              <h4>Change footer properties</h4>
               <Form.Field>
                 <Checkbox
                   toggle
-                  label="sticky - change footer stick value"
+                  label="change footer type"
+                  value={simple.toString()}
+                  checked={simple}
+                  onChange={() => setSimple(prev => !prev)}
+                />
+              </Form.Field>
+              <Form.Field>
+                <Checkbox
+                  toggle
+                  label="change footer sticky value"
                   value={sticky.toString()}
                   checked={sticky}
                   onChange={() => setSticky(prev => !prev)}
@@ -73,7 +78,9 @@ const Example10 = () => {
             <h4>Controlled Props:</h4>
             <Background>
               <pre>
-                {"{\n  stickyFooter: "}
+                {"{\n  simpleFooter: "}
+                <span style={{ color: "rgb(102, 217, 239)" }}>{simple.toString()}</span>
+                {",\n  stickyFooter: "}
                 <span style={{ color: "rgb(102, 217, 239)" }}>{sticky.toString()}</span>
                 {"\n}"}
               </pre>
@@ -87,7 +94,30 @@ const Example10 = () => {
         columns={columns}
         stickyFooter={sticky}
         tableHeight={400}
-        footerComponent={() => <Footer>Footer content</Footer>}
+        footerStyle={{ backgroundColor: "white" }}
+        footerComponent={({ widths }) => (
+          <Footer>
+            {simple ? (
+              "Hello, World"
+            ) : (
+              <div style={{ display: "flex" }}>
+                {columns.map((c, i) => {
+                  const width = `${widths[i]}px`;
+                  const style: React.CSSProperties = {
+                    width,
+                    minWidth: width,
+                    padding: "8px"
+                  };
+                  return (
+                    <div key={c.key} style={style}>
+                      Footer Cell
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </Footer>
+        )}
       />
     </>
   );
@@ -96,20 +126,54 @@ const Example10 = () => {
 const Source = `
 const data = [/* ... */];
 
-const Footer = styled.div\`
-  background-color: white;
-  padding: 8px;
-\`;
+const Footer = ({ children }) => (
+  <div style={{ backgroundColor: "white" }}>
+    {children}
+  </div>
+);
+
+const SimpleFooter = ({ stickyFooter }) => {
+  return (
+    <StyledTable
+      borders
+      data={data}
+      columns={columns}
+      tableHeight={400}
+      stickyFooter={stickyFooter}
+      footerStyle={{ backgroundColor: "white" }}
+      footerComponent={() => <Footer>Hello, World</Footer>}
+    />
+  );
+};
 
-const Controlled = ({ stickyFooter }) => {
+const ComplexFooter = ({ stickyFooter }) => {
   return (
     <StyledTable
       borders
       data={data}
       columns={columns}
       tableHeight={400}
       stickyFooter={stickyFooter}
-      footerComponent={() => <Footer>Footer content</Footer>}
+      footerStyle={{ backgroundColor: "white" }}
+      footerComponent={({ widths }) => (
+        <Footer>
+          <div style={{ display: "flex" }}>
+            {columns.map((c, i) => {
+              const width = \`\${widths[i]}px\`;
+              const style: React.CSSProperties = {
+                width,
+                minWidth: width,
+                padding: "8px"
+              };
+              return (
+                <div key={c.key} style={style}>
+                  Footer Cell
+                </div>
+              );
+            })}
+          </div>
+        </Footer>
+      )}
     />
   );
 };

index.d.ts

@@ -104,6 +104,13 @@ export interface SubComponentProps<T> {
   clearSizeCache: CacheFunction;
 }
 
+export interface FooterProps {
+  /**
+   * exposes the widths of each column to the footer
+   */
+  widths: number[];
+}
+
 export interface ColumnProps<T> {
   /**
    * The unique identifier for a particular column. This is also used as an index
@@ -190,6 +197,14 @@ export interface TableProps<T> {
    * Specify the height of the table in pixels.
    */
   tableHeight?: number;
+  /**
+   * Specify the minimum height of the table in pixels.
+   */
+  minTableHeight?: number;
+  /**
+   * Specify the maximum height of the table in pixels.
+   */
+  maxTableHeight?: number;
   /**
    * Specify the width of the table in pixels.
    */
@@ -234,6 +249,14 @@ export 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 the footer.
+   */
+  footerStyle?: CSSProperties;
+  /**
+   * a className used to customize the footer
+   */
+  footerClassname?: string;
   /**
    * generates a unique identifier for the row
    * @param row the row
@@ -248,7 +271,7 @@ export interface TableProps<T> {
   /**
    * optionally add a footer
    */
-  footerComponent?: () => React.ReactNode;
+  footerComponent?: (props: FooterProps) => React.ReactNode;
   /**
    * When a column has `expander`, this component will be rendered under the row.
    */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fluid-table",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "A React table inspired by react-window",
   "author": "Mckervin Ceme <mckervinc@live.com>",
   "license": "MIT",