@gpa-gemstone/react-table 1.2.10 → 1.2.13

package/lib/Table.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export interface Column<T> {
     key: string;
-    label: string;
+    label: string | React.ReactNode;
     field?: keyof T;
     headerStyle?: React.CSSProperties;
     rowStyle?: React.CSSProperties;
@@ -16,7 +16,7 @@ export interface TableProps<T> {
      * List of T objects used to generate rows
      */
     data: T[];
-    onClick: (data: {
+    onClick?: (data: {
         colKey: string;
         colField?: keyof T;
         row: T;
@@ -35,7 +35,7 @@ export interface TableProps<T> {
         colKey: string;
         colField?: keyof T;
         ascending: boolean;
-    }): void;
+    }, event: any): void;
     tableClass?: string;
     tableStyle?: React.CSSProperties;
     theadStyle?: React.CSSProperties;

package/lib/Table.js

@@ -34,14 +34,15 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = exports.Rows = void 0;
+var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 var React = require("react");
 function Table(props) {
     return (React.createElement("table", { className: props.tableClass !== undefined ? props.tableClass : '', style: props.tableStyle },
         React.createElement(Header, { Class: props.theadClass, Style: props.theadStyle, Cols: props.cols, SortKey: props.sortKey, Ascending: props.ascending, Click: function (d, e) { return handleSort(d, e); } }),
-        React.createElement(Rows, { Data: props.data, Cols: props.cols, RowStyle: props.rowStyle, BodyStyle: props.tbodyStyle, BodyClass: props.tbodyClass, Click: function (data, e) { return props.onClick(data, e); }, Selected: props.selected, KeySelector: props.keySelector })));
+        React.createElement(Rows, { Data: props.data, Cols: props.cols, RowStyle: props.rowStyle, BodyStyle: props.tbodyStyle, BodyClass: props.tbodyClass, Click: function (data, e) { return (props.onClick === undefined ? null : props.onClick(data, e)); }, Selected: props.selected, KeySelector: props.keySelector })));
     function handleSort(data, event) {
         if (data.colKey !== null)
-            props.onSort(data);
+            props.onSort(data, event);
     }
 }
 exports.default = Table;
@@ -87,11 +88,12 @@ function HeaderCell(props) {
         style.position = 'relative';
     }
     return (React.createElement("th", { style: style, onClick: function (e) { return props.Click(e); } },
-        React.createElement(RenderAngleIcon, { SortKey: props.SortKey, Key: props.DataKey, Ascending: props.Ascending }),
-        React.createElement("div", { style: { marginLeft: 10 } }, props.Label)));
+        React.createElement("div", { style: { position: 'absolute', width: 25 } },
+            React.createElement(RenderAngleIcon, { SortKey: props.SortKey, Key: props.DataKey, Ascending: props.Ascending })),
+        React.createElement("div", { style: { marginLeft: 25 } }, props.Label)));
 }
 function RenderAngleIcon(props) {
-    var AngleIcon = function () { return (React.createElement("div", { style: { position: 'absolute', top: 10, transform: (props.Ascending ? 'rotate(0deg)' : 'rotate(180deg)') } }, '^')); };
+    var AngleIcon = function (a) { return a.ascending ? gpa_symbols_1.SVGIcons.ArrowDropUp : gpa_symbols_1.SVGIcons.ArrowDropDown; };
     if (props.SortKey === null)
         return null;
     if (props.SortKey !== props.Key)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-table",
-  "version": "1.2.10",
+  "version": "1.2.13",
   "description": "Table for GPA web applications",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -45,6 +45,7 @@
     "typescript": "4.4.4"
   },
   "dependencies": {
+    "@gpa-gemstone/gpa-symbols": "0.0.20",
     "@gpa-gemstone/helper-functions": "0.0.14",
     "@types/lodash": "^4.14.171",
     "@types/react": "^17.0.14",