fix: improve Table component types

Author: Haider Alshamma

src/Table/BaseTable.story.tsx

@@ -1,11 +1,10 @@
-/* eslint-disable react/prop-types */
 import React from "react";
 import styled from "styled-components";
 import { boolean, text } from "@storybook/addon-knobs";
 import { action } from "@storybook/addon-actions";
 import { Box, DropdownButton, DropdownMenu, Button, Text } from "..";
+import { ColumnType } from "./Table.types";
 import { getMockRows, mockColumns } from "./Table.mock-utils";
-import { Columns } from "./Table.types";
 import { Table } from ".";
 
 const dateToString = ({ cellData }) => {
@@ -31,7 +30,15 @@ const dropdownCellRenderer = ({ cellData }) => (
   </Box>
 );
 
-const columns: Columns = [
+type Row = {
+  date: string;
+  expectedQuantity: string;
+  actualQuantity: string;
+  note?: string;
+  id: string;
+};
+
+const columns: ColumnType<Row>[] = [
   { label: "Date", dataKey: "date" },
   { label: "Expected Quantity", dataKey: "expectedQuantity" },
   { label: "Actual Quantity", dataKey: "actualQuantity", align: "right" },
@@ -185,7 +192,7 @@ const columnsWithFormatter = [
   { label: "Actual Quantity", dataKey: "actualQuantity" },
 ];
 
-const columnsWithAlignment: Columns = [
+const columnsWithAlignment: ColumnType<Row>[] = [
   { label: "Date", dataKey: "date" },
   { label: "Expected Eaches", dataKey: "expectedQuantity" },
   { label: "Actual Eaches", dataKey: "actualQuantity", align: "right" },
@@ -392,7 +399,6 @@ export const WithAFooter = () => (
 WithAFooter.story = {
   name: "with a footer",
 };
-/* eslint-enable react/prop-types */
 
 const TableWithBorderedRows = styled(Table)`
   border-collapse: collapse;

src/Table/BaseTable.tsx

@@ -1,102 +1,86 @@
 import React from "react";
 import styled from "styled-components";
-import PropTypes from "prop-types";
-import { space } from "styled-system";
-import propTypes from "@styled-system/prop-types";
+import { addStyledProps } from "../StyledProps";
 import TableHead from "./TableHead";
 import TableBody from "./TableBody";
 import TableFoot from "./TableFoot";
-import { rowsPropType, RowType, Columns } from "./Table.types";
+import { ColumnType } from "./Table.types";
 
-export type BaseTableProps = {
-  columns: Columns;
-  rows: RowType[];
+export type BaseTableProps<Row extends unknown> = {
+  columns: ColumnType<Row>[];
+  rows: Row[];
   noRowsContent?: string;
   keyField?: string;
   id?: string;
   loading?: boolean;
-  footerRows?: any;
+  footerRows?: Row[];
   rowHovers?: boolean;
   compact?: boolean;
   className?: string;
   stickyHeader?: boolean;
-  onRowMouseEnter?: (...args: any[]) => any;
-  onRowMouseLeave?: (...args: any[]) => any;
-  onMouseEnter?: any;
-  onMouseLeave?: any;
+  onRowMouseEnter?: React.DOMAttributes<HTMLTableRowElement>["onMouseEnter"];
+  onRowMouseLeave?: React.DOMAttributes<HTMLTableRowElement>["onMouseLeave"];
+  onMouseEnter?: React.DOMAttributes<HTMLTableElement>["onMouseEnter"];
+  onMouseLeave?: React.DOMAttributes<HTMLTableElement>["onMouseLeave"];
 };
 
-const StyledTable = styled.table<any>(space, {
-  borderCollapse: "collapse",
-  width: "100%",
-  background: "white",
-  position: "relative",
-});
+const StyledTable = styled.table(
+  {
+    borderCollapse: "collapse",
+    width: "100%",
+    background: "white",
+    position: "relative",
+  },
+  addStyledProps
+);
 
-const BaseTable: React.FC<BaseTableProps> = ({
+export default function BaseTable<Row>({
   columns,
   rows,
   noRowsContent = "No records have been created for this table.",
-  keyField = "id",
+  keyField,
   id,
   loading,
-  footerRows = [],
-  rowHovers = true,
+  footerRows,
+  rowHovers,
   compact,
   className,
   stickyHeader,
-  onRowMouseEnter = () => {},
-  onRowMouseLeave = () => {},
+  onRowMouseEnter,
+  onRowMouseLeave,
   ...props
-}) => (
-  <StyledTable id={id} className={className} {...props}>
-    <TableHead columns={columns} compact={compact} sticky={stickyHeader} />
-    <TableBody
-      columns={columns}
-      rows={rows}
-      keyField={keyField}
-      noRowsContent={noRowsContent}
-      loading={loading}
-      rowHovers={rowHovers}
-      compact={compact}
-      onRowMouseLeave={onRowMouseLeave}
-      onRowMouseEnter={onRowMouseEnter}
-    />
-    {footerRows && (
-      <TableFoot columns={columns} rows={footerRows} keyField={keyField} loading={loading} compact={compact} />
-    )}
-  </StyledTable>
-);
+}: BaseTableProps<Row>) {
+  return (
+    <StyledTable id={id} className={className} {...props}>
+      <TableHead columns={columns} compact={compact} sticky={stickyHeader} />
+      <TableBody
+        columns={columns}
+        rows={rows}
+        keyField={keyField}
+        noRowsContent={noRowsContent}
+        loading={loading}
+        rowHovers={rowHovers}
+        compact={compact}
+        onRowMouseLeave={onRowMouseLeave}
+        onRowMouseEnter={onRowMouseEnter}
+      />
+      {footerRows && (
+        <TableFoot columns={columns} rows={footerRows} keyField={keyField} loading={loading} compact={compact} />
+      )}
+    </StyledTable>
+  );
+}
 
-BaseTable.propTypes = {
-  ...propTypes.space,
-  columns: PropTypes.any,
-  rows: PropTypes.any,
-  noRowsContent: PropTypes.string,
-  keyField: PropTypes.string,
-  id: PropTypes.string,
-  loading: PropTypes.bool,
-  footerRows: rowsPropType,
-  rowHovers: PropTypes.bool,
-  compact: PropTypes.bool,
-  className: PropTypes.string,
-  stickyHeader: PropTypes.bool,
-  onRowMouseEnter: PropTypes.func,
-  onRowMouseLeave: PropTypes.func,
-};
+const noop = () => {};
 
 BaseTable.defaultProps = {
   noRowsContent: "No records have been created for this table.",
   keyField: "id",
-  id: undefined,
   loading: false,
   footerRows: [],
   rowHovers: true,
   compact: false,
-  className: undefined,
   stickyHeader: false,
-  onRowMouseEnter: () => {},
-  onRowMouseLeave: () => {},
+  onRowMouseEnter: noop,
+  onRowMouseLeave: noop,
 };
-
-export default BaseTable;

src/Table/SortingColumnHeader.story.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { action } from "@storybook/addon-actions";
-import { withKnobs, text, boolean } from "@storybook/addon-knobs";
+import { text, boolean } from "@storybook/addon-knobs";
 import { Table } from "../index";
 
 export default {

src/Table/StatefulTable.tsx

@@ -1,11 +1,13 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
+import propTypes from "@styled-system/prop-types";
 import { Pagination } from "../Pagination";
 import { getSubset } from "../utils/subset";
 import BaseTable, { BaseTableProps } from "./BaseTable";
 import { addExpandableControl } from "./addExpandableControl";
 import { addSelectableControl } from "./addSelectableControl";
 
-export type StatefulTableProps = BaseTableProps & {
+export type StatefulTableProps = BaseTableProps<unknown> & {
   selectedRows?: string[];
   onRowSelectionChange?: (...args: any[]) => any;
   onRowExpansionChange?: (...args: any[]) => any;
@@ -224,7 +226,33 @@ class StatefulTable extends Component<StatefulTableProps, StatefulTableState> {
   render() {
     const { paginatedRows, currentPage } = this.state;
     const { rowsPerPage, paginationProps, paginationCss } = this.props;
-    const baseTableProps = getSubset(this.getControlProps(), BaseTable.propTypes);
+    const baseTableProps = getSubset(this.getControlProps(), {
+      ...propTypes.space,
+      columns: PropTypes.any,
+      rows: PropTypes.any,
+      noRowsContent: PropTypes.string,
+      keyField: PropTypes.string,
+      id: PropTypes.string,
+      loading: PropTypes.bool,
+      rowHovers: PropTypes.bool,
+      compact: PropTypes.bool,
+      className: PropTypes.string,
+      stickyHeader: PropTypes.bool,
+      onRowMouseEnter: PropTypes.func,
+      onRowMouseLeave: PropTypes.func,
+      footerRows: PropTypes.arrayOf(
+        PropTypes.objectOf(
+          PropTypes.oneOfType([
+            PropTypes.number,
+            PropTypes.string,
+            PropTypes.bool,
+            PropTypes.func,
+            PropTypes.node,
+            PropTypes.shape({}),
+          ])
+        )
+      ),
+    });
     return (
       <>
         <BaseTable {...baseTableProps} />

src/Table/StyledTh.tsx

@@ -1,5 +1,6 @@
-import styled, { CSSObject } from "styled-components";
+import styled, { CSSObject, CSSProperties } from "styled-components";
 import { DefaultNDSThemeType } from "../theme.type";
+
 const stickyStyles = (theme: DefaultNDSThemeType): CSSObject => ({
   position: "sticky",
   top: 0,
@@ -9,13 +10,15 @@ const stickyStyles = (theme: DefaultNDSThemeType): CSSObject => ({
 });
 
 type StyledThProps = {
-  width?: any;
+  width?: CSSProperties["width"];
   compact?: boolean;
   theme?: DefaultNDSThemeType;
-  sticky?: any;
+  sticky?: boolean;
 };
-const StyledTh = styled.th(({ width, compact, theme, sticky }: StyledThProps): CSSObject => {
+
+const StyledTh = styled.th<StyledThProps>(({ width, compact, theme, sticky }) => {
   const padding = compact ? theme.space.x1 : theme.space.x2;
+
   return {
     fontWeight: "normal",
     textAlign: "left",
@@ -29,4 +32,5 @@ const StyledTh = styled.th(({ width, compact, theme, sticky }: StyledThProps): C
     width: width || "auto",
   };
 });
+
 export default StyledTh;

src/Table/Table.tsx

@@ -1,16 +1,9 @@
 import React from "react";
-import StatefulTable from "./StatefulTable";
+import StatefulTable, { StatefulTableProps } from "./StatefulTable";
 import BaseTable from "./BaseTable";
 import SortingColumnHeader from "./SortingColumnHeader";
-import { StatefulTableProps } from "./StatefulTable";
-import { ColumnType, RowType, CellInfoType } from "./Table.types";
 
-export type TableProps = StatefulTableProps;
-export type TableColumnType = ColumnType;
-export type TableRowType = RowType;
-export type TableCellInfoType = CellInfoType;
-
-const Table = ({
+export default function Table({
   hasSelectableRows,
   rowsPerPage,
   hasExpandableRows,
@@ -23,8 +16,8 @@ const Table = ({
   paginationCss,
   paginationProps,
   ...props
-}: TableProps) =>
-  hasSelectableRows || rowsPerPage || hasExpandableRows ? (
+}: StatefulTableProps) {
+  return hasSelectableRows || rowsPerPage || hasExpandableRows ? (
     <StatefulTable
       hasExpandableRows={hasExpandableRows}
       hasSelectableRows={hasSelectableRows}
@@ -42,6 +35,6 @@ const Table = ({
   ) : (
     <BaseTable {...props} />
   );
-Table.SortingHeader = SortingColumnHeader;
+}
 
-export default Table;
+Table.SortingHeader = SortingColumnHeader;

src/Table/Table.types.ts

@@ -1,57 +1,27 @@
 import type { Key } from "react";
-import PropTypes from "prop-types";
 
-export type RowType = unknown;
-
-export interface CellInfoType {
+export interface CellInfoType<Row extends unknown> {
   cellData: unknown;
-  column: ColumnType;
-  row: RowType;
+  column: ColumnType<Row>[];
+  row: Row;
 }
 
 interface ColumnInfoType {
   align?: ColumnAlignment;
   label: string;
   dataKey?: Key;
   width?: string | number;
+  metadata?: Record<string, unknown>; // explore the ability to infer the type of metadata using a generic
 }
 
-type ColumnAlignment = "left" | "right" | "center";
+export type ColumnAlignment = "left" | "right" | "center";
 
-export type ColumnType = {
+export type ColumnType<Row extends unknown> = {
   align?: ColumnAlignment;
   label?: string;
-  cellFormatter?: (cell: CellInfoType) => React.ReactNode;
-  cellRenderer?: (cell: CellInfoType) => React.ReactNode;
+  cellFormatter?: (cell: CellInfoType<Row>) => React.ReactNode;
+  cellRenderer?: (cell: CellInfoType<Row>) => React.ReactNode;
   headerRenderer?: (column: ColumnInfoType) => React.ReactNode;
   headerFormatter?: (column: ColumnInfoType) => React.ReactNode;
   width?: string | number;
 } & ({ key: Key; dataKey?: never | undefined } | { dataKey: Key; key?: never | undefined });
-
-export type Columns = ColumnType[];
-
-export const columnPropType = PropTypes.shape({
-  align: PropTypes.oneOf(["right", "left", "center"]),
-  label: PropTypes.string,
-  dataKey: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
-  key: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
-  cellFormatter: PropTypes.func,
-  cellRenderer: PropTypes.func,
-  headerRenderer: PropTypes.func,
-  width: PropTypes.string,
-});
-
-export const rowPropType = PropTypes.objectOf(
-  PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string,
-    PropTypes.bool,
-    PropTypes.func,
-    PropTypes.node,
-    PropTypes.shape({}),
-  ])
-);
-
-export const columnsPropType = PropTypes.arrayOf(columnPropType);
-
-export const rowsPropType = PropTypes.arrayOf(rowPropType);