add footer + height changes

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/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/Props.tsx

@@ -14,6 +14,8 @@ const Container = styled.div`
 `;
 
 const Table = styled(BaseTable)`
+  border: 1px solid #ececec;
+
   .react-fluid-table-header {
     background-color: #282a36;
   }
@@ -406,6 +408,315 @@ const Props = () => (
         </Item>
       ))}
     </List>
+    <Header dividing size="small" color="grey">
+      Interfaces
+    </Header>
+    <Snippet code={`import { CSSProperties, ForwardedRef, ReactNode } from "react";
+
+type SortDirection = "ASC" | "DESC" | null;
+
+interface ExpanderProps {
+  /**
+   * whether or not the row is expanded
+   */
+  isExpanded: boolean;
+  /**
+   * handler for clicking the expansion button
+   */
+  onClick: (event?: React.MouseEvent<Element, MouseEvent>) => void;
+  /**
+   * required style for the expander
+   */
+  style: CSSProperties;
+}
+
+interface CellProps<T> {
+  /**
+   * the data for the row
+   */
+  row: T;
+  /**
+   * the index of the row
+   */
+  index: number;
+  /**
+   * an optional function that can be used to clear the size cache
+   */
+  clearSizeCache: (dataIndex: number, forceUpdate?: boolean) => void;
+  /**
+   * optional custom styles for each cell
+   */
+  style?: CSSProperties;
+}
+
+interface HeaderProps {
+  /**
+   * the onclick handler for the header cell
+   * @param e mouse event
+   * @returns void
+   */
+  onClick: (e: React.MouseEvent<Element, MouseEvent>) => void;
+  /**
+   * required style for the header
+   */
+  style: CSSProperties;
+  /**
+   * the direction of the sort, if applicable
+   */
+  sortDirection: SortDirection;
+}
+
+interface RowRenderProps<T> {
+  /**
+   * the data for the row
+   */
+  row: T;
+  /**
+   * the index of the row
+   */
+  index: number;
+  /**
+   * required row position styles
+   */
+  style: CSSProperties;
+  /**
+   * the cells for the row
+   */
+  children: ReactNode;
+  /**
+   * the className for the row-renderer
+   */
+  className?: string;
+}
+
+interface SubComponentProps<T> {
+  /**
+   * the data for the row
+   */
+  row: T;
+  /**
+   * the index of the row
+   */
+  index: number;
+  /**
+   * whether or not the row is expanded
+   */
+  isExpanded: boolean;
+  /**
+   * an optional function that can be used to clear the size cache
+   */
+  clearSizeCache: (dataIndex: number, forceUpdate?: boolean) => void;
+}
+
+interface FooterProps<T> {
+  /**
+   * exposes the widths of each column to the footer
+   */
+  widths: number[];
+  rows: T[];
+}
+
+interface FooterCellProps<T> {
+  /**
+   * the column that the current footer cell is pulling from
+   */
+  column: ColumnProps<T>;
+  /**
+   * the calculated width of the cell
+   */
+  width: number;
+  /**
+   * all the rows in the table. this can be useful for aggregation
+   */
+  rows: T[];
+}
+
+interface ColumnProps<T> {
+  /**
+   * The unique identifier for a particular column. This is also used as an index
+   * to get the particular value out of the row in order to display.
+   */
+  key: string;
+  /**
+   * The name of the header column, or a component to return a customized header cell.
+   */
+  header?: string | ((props: HeaderProps) => JSX.Element);
+  /**
+   * The width of a column in pixels. If this is set, the column will not resize.
+   */
+  width?: number;
+  /**
+   * The minimum width of a column in pixels. On resize, the column will never
+   * dip below this width.
+   */
+  minWidth?: number;
+  /**
+   * The maximum width of a column in pixels. On resize, the column will never
+   * grow beyond this width.
+   */
+  maxWidth?: number;
+  /**
+   * Determines whether or not a column is sortable.
+   */
+  sortable?: boolean;
+  /**
+   * Marks this cell as an expansion cell. The style is pre-determined, and does the
+   * functionalitty of collapsing/expanding a row.
+   */
+  expander?: boolean | ((props: ExpanderProps) => ReactNode);
+  /**
+   * Used to render custom content inside of a cell. This is useful for rendering different
+   * things inside of the react-fluid-table cell container.
+   */
+  content?: string | number | ((props: CellProps<T>) => ReactNode);
+  /**
+   * An advanced feature, this is used to render an entire cell, including the cell container.
+   * The \`content\` prop is ignored if this property is enabled.
+   */
+  cell?: (props: CellProps<T>) => JSX.Element;
+  /**
+   * specifies whether or not to display a footer cell
+   */
+  footer?: (props: FooterCellProps<T>) => ReactNode;
+}
+
+interface TableRef {
+  scrollTo: (scrollOffset: number) => void;
+  scrollToItem: (index: number, align?: string) => void;
+}
+
+interface TableProps<T> {
+  // required props
+  /**
+   * A list of rows that are to be displayed in the table.
+   */
+  data: T[];
+  /**
+   * This property determines how each cell is going to be rendered.
+   */
+  columns: ColumnProps<T>[];
+
+  // optional props
+  /**
+   * The id of the table.
+   */
+  id?: string;
+  /**
+   * Optional className to override CSS styles.
+   */
+  className?: string;
+  /**
+   * Function that is called when a header cell is sorted.
+   */
+  onSort?: (col: string | null, dir: SortDirection) => void;
+  /**
+   * The column that is sorted by default.
+   */
+  sortColumn?: string;
+  /**
+   * The direction that is sorted by default.
+   */
+  sortDirection?: SortDirection;
+  /**
+   * 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.
+   */
+  tableWidth?: number;
+  /**
+   * Specify the minimum width of any column. Default: \`80\`.
+   */
+  minColumnWidth?: number;
+  /**
+   * The fixed height of each row in pixels. If \`subComponent\` is specified,
+   * then this will be the fixed height of the portion of the row that is
+   * NOT the subComponent.
+   */
+  rowHeight?: number;
+  /**
+   * specify a fixed header height
+   */
+  headerHeight?: number;
+  /**
+   * Enable or disable row borders. Default: \`false\`.
+   */
+  borders?: boolean;
+  /**
+   * React styles used for customizing the table.
+   */
+  tableStyle?: CSSProperties;
+  /**
+   * React styles used for customizing the header.
+   */
+  headerStyle?: CSSProperties;
+  /**
+   * a className used to customize the header
+   */
+  headerClassname?: string;
+  /**
+   * React styles used for customizing each row. Could be an object or
+   * a function that takes the index of the row and returns an object.
+   */
+  rowStyle?: CSSProperties | ((index: number) => CSSProperties);
+  /**
+   * React className used for customizing each row. Could be an object or
+   * 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
+   * @returns string or number representing the item key
+   */
+  itemKey?: (row: T) => string | number;
+  /**
+   * controlls whether or not the footer is sticky. this is only used if
+   * \`footerComponent\` is specified.
+   */
+  stickyFooter?: boolean;
+  /**
+   * optionally add a footer. NOTE: this overrides the \`footer\` prop of a
+   * column, so use wisely. This gives the user more control over how the
+   * footer is rendered. Can return any value.
+   */
+  footerComponent?: (props: FooterProps<T>) => ReactNode;
+  /**
+   * When a column has \`expander\`, this component will be rendered under the row.
+   */
+  subComponent?: (props: SubComponentProps<T>) => ReactNode;
+  /**
+   * The callback that gets called every time a row is clicked.
+   */
+  onRowClick?: (event: React.MouseEvent<Element, MouseEvent>, data: { index: number }) => void;
+  /**
+   * Custom component to wrap a table row. This provides another way of providing
+   * more row customization options.
+   */
+  rowRenderer?: (props: RowRenderProps<T>) => JSX.Element;
+  /**
+   * a ref for specific table functions
+   */
+  ref?: ForwardedRef<TableRef>;
+}
+`} />
   </Container>
 );
 

example/src/examples/07-controlled.tsx

@@ -22,6 +22,11 @@ import { TestData, testData } from "../data";
 
 const StyledTable = styled(Table)`
   margin-top: 10px;
+  border: 1px solid #ececec;
+
+  .react-fluid-table-header {
+    background-color: #dedede;
+  }
 `;
 
 const Background = styled.div`