@gpa-gemstone/react-table 1.2.23 → 1.2.25

package/lib/Table.d.ts

@@ -43,6 +43,13 @@ export interface TableProps<T> {
     tbodyStyle?: React.CSSProperties;
     tbodyClass?: string;
     selected?(data: T): boolean;
+    onDragStart?: ((data: {
+        colKey: string;
+        colField?: keyof T;
+        row: T;
+        data: T[keyof T] | null;
+        index: number;
+    }, e: any) => void);
     rowStyle?: React.CSSProperties;
     keySelector?: (data: T) => string;
     /**
@@ -65,6 +72,13 @@ interface IRowProps<T> {
         data: T[keyof T] | null;
         index: number;
     }, e: React.MouseEvent<HTMLTableHeaderCellElement, MouseEvent>) => void;
+    DragStart?: ((data: {
+        colKey: string;
+        colField?: keyof T;
+        row: T;
+        data: T[keyof T] | null;
+        index: number;
+    }, e: any) => void);
     Selected?: ((data: T) => boolean);
     KeySelector?: (data: T) => string;
 }

package/lib/Table.js

@@ -39,7 +39,7 @@ 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 === undefined ? null : props.onClick(data, e)); }, Selected: props.selected, KeySelector: props.keySelector }),
+        React.createElement(Rows, { DragStart: props.onDragStart, 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 }),
         props.lastRow !== undefined ? React.createElement("tr", { style: (props.rowStyle !== undefined) ? __assign({}, props.rowStyle) : {}, key: -1 }, props.lastRow) : null));
     function handleSort(data, event) {
         if (data.colKey !== null)
@@ -52,7 +52,7 @@ function Rows(props) {
         return null;
     var rows = props.Data.map(function (item, rowIndex) {
         var cells = props.Cols.map(function (colData) {
-            return React.createElement(Cell, { key: colData.key, Style: colData.rowStyle, DataKey: colData.key, DataField: colData.field, Object: item, RowIndex: rowIndex, Content: colData.content, Click: function (data, e) { return props.Click(data, e); } });
+            return React.createElement(Cell, { key: colData.key, Style: colData.rowStyle, DataKey: colData.key, DataField: colData.field, Object: item, RowIndex: rowIndex, Content: colData.content, Click: function (data, e) { return props.Click(data, e); }, DragStart: props.DragStart });
         });
         var style = (props.RowStyle !== undefined) ? __assign({}, props.RowStyle) : {};
         if (style.cursor === undefined)
@@ -71,9 +71,12 @@ function Rows(props) {
 exports.Rows = Rows;
 function Cell(props) {
     var css = (props.Style !== undefined) ? __assign({}, props.Style) : {};
+    if (props.DragStart !== undefined)
+        css.cursor = "grab";
     var getFieldValue = function () { return props.DataField !== undefined ? props.Object[props.DataField] : null; };
     var getFieldContent = function () { return props.Content !== undefined ? props.Content(props.Object, props.DataKey, props.DataField, css, props.RowIndex) : getFieldValue(); };
-    return (React.createElement("td", { style: css, onClick: function (e) { return props.Click({ colKey: props.DataKey, colField: props.DataField, row: props.Object, data: getFieldValue(), index: props.RowIndex }, e); } }, getFieldContent()));
+    return (React.createElement("td", { style: css, onClick: function (e) { return props.Click({ colKey: props.DataKey, colField: props.DataField, row: props.Object, data: getFieldValue(), index: props.RowIndex }, e); }, draggable: props.DragStart !== undefined, onDragStart: function (e) { if (props.DragStart !== undefined)
+            props.DragStart({ colKey: props.DataKey, colField: props.DataField, row: props.Object, data: getFieldValue(), index: props.RowIndex }, e); } }, getFieldContent()));
 }
 function Header(props) {
     return (React.createElement("thead", { className: props.Class, style: props.Style },
@@ -89,9 +92,8 @@ function HeaderCell(props) {
         style.position = 'relative';
     }
     return (React.createElement("th", { style: style, onClick: function (e) { return props.Click(e); } },
-        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)));
+        React.createElement(RenderAngleIcon, { SortKey: props.SortKey, Key: props.DataKey, Ascending: props.Ascending }),
+        React.createElement("div", { style: { marginLeft: (props.SortKey === props.DataKey ? 25 : 0) } }, props.Label)));
 }
 function RenderAngleIcon(props) {
     var AngleIcon = function (a) { return a.ascending ? gpa_symbols_1.SVGIcons.ArrowDropUp : gpa_symbols_1.SVGIcons.ArrowDropDown; };
@@ -99,6 +101,7 @@ function RenderAngleIcon(props) {
         return null;
     if (props.SortKey !== props.Key)
         return null;
-    return React.createElement(AngleIcon, { ascending: props.Ascending });
+    return React.createElement("div", { style: { position: 'absolute', width: 25 } },
+        React.createElement(AngleIcon, { ascending: props.Ascending }));
 }
 ;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-table",
-  "version": "1.2.23",
+  "version": "1.2.25",
   "description": "Table for GPA web applications",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",