morse-react-tables - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/components/columns/BoundDatasetTableColumn.d.ts

@@ -0,1 +1,2 @@
+import { TableCellProps, TableHeaderProps } from "packages/morse-react/dist";
 import { DatasetTableColumn, DatasetTableColumnCell, DatasetTableColumnHeader } from "./DatasetTableColumn";
@@ -6,7 +7,11 @@ /**
 export declare class BoundDatasetTableColumn<T> implements DatasetTableColumn<T> {
-    private propertyName;
+    propertyName: keyof T;
     heading: DatasetTableColumnHeader<T>;
+    headingCellProps?: Omit<TableHeaderProps, "header">;
+    cellProps?: Omit<TableCellProps, "header">;
     cell(item: T): DatasetTableColumnCell<T>;
-    headingClassName?: string | undefined;
-    constructor(propertyName: keyof T, headingText?: string);
+    constructor(propertyName: keyof T, headingText?: string, configuration?: {
+        headingCellProps?: Omit<TableHeaderProps, "header">;
+        cellProps?: Omit<TableCellProps, "header">;
+    });
 }

dist/components/columns/BoundDatasetTableColumn.js

@@ -12,5 +12,8 @@ "use strict";
 var BoundDatasetTableColumn = /** @class */ (function () {
-    function BoundDatasetTableColumn(propertyName, headingText) {
+    function BoundDatasetTableColumn(propertyName, headingText, configuration) {
+        if (configuration === void 0) { configuration = {}; }
         this.propertyName = propertyName;
         this.heading = react_1.default.createElement("span", null, headingText !== null && headingText !== void 0 ? headingText : propertyName);
+        this.cellProps = configuration.cellProps;
+        this.headingCellProps = configuration.headingCellProps;
     }
@@ -17,0 +20,0 @@ BoundDatasetTableColumn.prototype.cell = function (item) {

dist/components/columns/DatasetTableColumn.d.ts

 /// <reference types="react" />
+import { TableCellProps, TableHeaderProps } from "packages/morse-react/dist";
 export declare type DatasetTableColumnHeader<T> = ((dataset: T[]) => React.ReactNode) | React.ReactNode;
@@ -23,2 +24,6 @@ export declare type DatasetTableColumnCell<T> = ((item: T, dataset?: T[]) => React.ReactNode) | React.ReactNode;
     headingClassName?: string;
+    /** Props to pass to the `TableCell` components rendered for the header row */
+    headingCellProps?: Omit<TableHeaderProps, "header">;
+    /** Props to pass to the `TableCell` components rendered for displaying data */
+    cellProps?: Omit<TableCellProps, "header">;
 };

dist/components/DatasetTable.d.ts

@@ -1,2 +0,2 @@
-import { Table } from "morse-react";
+import { SortDirection, Table } from "morse-react";
 import React, { ComponentProps } from "react";
@@ -10,2 +10,15 @@ import { DatasetTableColumn } from "./columns/DatasetTableColumn";
     /**
+     * Array of objects to allow `BoundDatasetTableColumns` to infer ability to
+     * sort and sort direction, if any.
+     *
+     * Can be overridden by any setting `sortable` and `sortDirection` in any
+     * given `BoundDatasetTableColumn`'s configuration in the `headingProps`
+     * config.
+     */
+    sorts?: Array<{
+        property: keyof T;
+        direction?: SortDirection;
+    }>;
+    onSortDirectionChange?: (property: keyof T, newDirection: SortDirection) => void;
+    /**
      * An array of DatasetTableColumns that describes the column configuration
@@ -12,0 +25,0 @@ */

dist/components/DatasetTable.js

@@ -37,2 +37,3 @@ "use strict";
 var react_router_dom_1 = require("react-router-dom");
+var columns_1 = require("./columns");
 /**
@@ -65,3 +66,25 @@ * A table component to display tabular data from a data set for a configured list of columns.
     var headings = props.columns.map(function (column, index) {
-        return (react_1.default.createElement(morse_react_1.TableHeaderCell, { key: "table-cell-cell-" + index }, callOrReturnHeadingNode(column)));
+        var _a, _b;
+        var sort = column instanceof columns_1.BoundDatasetTableColumn &&
+            ((_a = props.sorts) === null || _a === void 0 ? void 0 : _a.find(function (sort) { return sort.property === column.propertyName; }));
+        var isSortable = !!sort;
+        var sortDirection = sort ? sort.direction : undefined;
+        var handleOnClick = (isSortable || ((_b = column.headingCellProps) === null || _b === void 0 ? void 0 : _b.sortable)) &&
+            column instanceof columns_1.BoundDatasetTableColumn
+            ? function () {
+                if (props.onSortDirectionChange) {
+                    props.onSortDirectionChange(
+                    /**
+                     * FIXME assertion because the type of
+                     * propertyName is somehow getting lost after an
+                     * `instanceof` check.
+                     */
+                    column.propertyName, sortDirection === morse_react_1.SortDirection.Descending ||
+                        sortDirection === undefined
+                        ? morse_react_1.SortDirection.Ascending
+                        : morse_react_1.SortDirection.Descending);
+                }
+            }
+            : undefined;
+        return (react_1.default.createElement(morse_react_1.TableHeaderCell, __assign({ key: "table-cell-cell-" + index, sortable: isSortable, sortDirection: sortDirection, onClick: handleOnClick }, column.headingCellProps), callOrReturnHeadingNode(column)));
     });
@@ -83,3 +106,3 @@ var linkMap = react_1.useMemo(function () {
         var cells = props.columns.map(function (column, index) {
-            return (react_1.default.createElement(morse_react_1.TableCell, { key: "table-cell-row-" + index + "-column-" + column.heading }, linkTo ? (react_1.default.createElement(react_router_dom_1.Link, { style: {
+            return (react_1.default.createElement(morse_react_1.TableCell, __assign({ key: "table-cell-row-" + index + "-column-" + column.heading }, column.cellProps), linkTo ? (react_1.default.createElement(react_router_dom_1.Link, { style: {
                     display: "block",
@@ -86,0 +109,0 @@ textDecoration: "inherit",

package.json

 {
     "name": "morse-react-tables",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "description": "Patterns for building tables",
@@ -41,3 +41,3 @@ "repository": {
     ],
-    "gitHead": "76f5d6a6a099139dcbacd5c9a5add0cda186377e"
+    "gitHead": "1c00d599fb3523932901abce6266106c339fbce9"
 }

No alert changes

Improved metrics

Total package byte prevSize

40683

increased by9.83%

Lines of code

644

increased by8.24%

No dependency changes