Merge pull request #82 from mckervinc/feature/heights

Feature: Add footer prop to columns array

Author: mckervinc

CHANGELOG.md

@@ -1,5 +1,16 @@
 # CHANGELOG
 
+## 0.4.7
+
+_2023-09-28_
+
+### Features
+
+- added a `footer` prop to each `column` object in the `columns` array. allows the user to create footer cell columns.
+- `footerComponent` will still provide a more customizable footer experience
+- hopefully fix issues with the auto-calculation of tables when `minTableHeight` and/or `maxTableHeight` is used.
+- slimmed down some of the opinionated CSS, giving the user more control over header and body styles
+
 ## 0.4.6
 
 _2023-09-28_

example/src/App.tsx

@@ -11,6 +11,7 @@ import { Example7, Source as Example7Code } from "./examples/07-controlled";
 import { Example8, Source as Example8Code } from "./examples/08-header";
 import { Example9, Source as Example9Code } from "./examples/09-scroll";
 import { Example10, Source as Example10Code } from "./examples/10-footer";
+import { Example11, Source as Example11Code } from "./examples/11-heights";
 
 const router = createHashRouter([
   {
@@ -93,6 +94,14 @@ const router = createHashRouter([
       </Page>
     )
   },
+  {
+    path: "/heights",
+    element: (
+      <Page title="Table Heights" code={Example11Code}>
+        <Example11 />
+      </Page>
+    )
+  },
   {
     path: "/props",
     element: (

example/src/ColumnProps.tsx

@@ -4,6 +4,8 @@ import styled from "styled-components";
 import { InlineCode } from "./components/library/InlineCode";
 
 const StyledTable = styled(Table)`
+  border: 1px solid #ececec;
+
   .react-fluid-table-header {
     background-color: #282a36;
   }
@@ -121,6 +123,17 @@ const data: PropData[] = [
         property is defined, then <code>content</code> will be igored.
       </div>
     )
+  },
+  {
+    prop: "footer",
+    type: "FooterElement",
+    description: (
+      <div>
+        This property allows you to customize the content inside of a footer cell. The library will create
+        a cell container for you with the proper column widths and resizability. If this field is
+        defined, then this will get rendered inside of the cell container in the footer.
+      </div>
+    )
   }
 ];
 

example/src/Page.tsx

@@ -96,6 +96,9 @@ const LinkContainer = () => (
     <Menu.Item as={Link} to="/scroll">
       Methods
     </Menu.Item>
+    <Menu.Item as={Link} to="/heights">
+      Table Heights
+    </Menu.Item>
     <Menu.Item as={Link} to="/footer">
       Footer
     </Menu.Item>