@chumsinc/sortable-tables 2.0.12 → 2.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -1
- package/dist/DataTable.js +1 -2
- package/dist/DataTable.js.map +1 -1
- package/dist/DataTableRow.js +2 -3
- package/dist/DataTableRow.js.map +1 -1
- package/dist/DataTableTBody.js +2 -3
- package/dist/DataTableTBody.js.map +1 -1
- package/dist/SortableTable.js +1 -2
- package/dist/SortableTable.js.map +1 -1
- package/dist/Table.js +4 -4
- package/dist/Table.js.map +1 -1
- package/dist/types.d.ts +3 -3
- package/package.json +1 -1
- package/src/DataTable.tsx +1 -2
- package/src/DataTableRow.tsx +13 -14
- package/src/DataTableTBody.tsx +12 -14
- package/src/SortableTable.tsx +1 -2
- package/src/Table.tsx +5 -4
- package/src/types.ts +4 -4
- package/dist/utils.d.ts +0 -1
- package/dist/utils.js +0 -2
- package/dist/utils.js.map +0 -1
- package/src/utils.ts +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,7 +7,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
9
9
|
|
|
10
|
-
#### [v2.0.
|
|
10
|
+
#### [v2.0.14](https://github.com/ChumsInc/sortable-tables/compare/v2.0.13...v2.0.14)
|
|
11
|
+
|
|
12
|
+
> 2025-08-06
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Commits
|
|
18
|
+
|
|
19
|
+
- [`48f4b1f`](https://github.com/ChumsInc/sortable-tables/commit/48f4b1f0df1e94a4eede5e1333a25262b28f4cdd) chore: npm updates, apply className attribute to rendered table.
|
|
20
|
+
|
|
21
|
+
#### [v2.0.13](https://github.com/ChumsInc/sortable-tables/compare/v2.0.12...v2.0.13) - 2025-07-08
|
|
22
|
+
|
|
23
|
+
> 2025-07-08
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
### Commits
|
|
29
|
+
|
|
30
|
+
- [`4f9d4cc`](https://github.com/ChumsInc/sortable-tables/commit/4f9d4cc0cb6da9c27fa26c93bfd6ee302a70ff3c) fix: still trying to make it work for MouseEvent typing ... perhaps I should learn to write tests?
|
|
31
|
+
|
|
32
|
+
#### [v2.0.12](https://github.com/ChumsInc/sortable-tables/compare/v2.0.11...v2.0.12) - 2025-07-08
|
|
11
33
|
|
|
12
34
|
> 2025-07-08
|
|
13
35
|
|
package/dist/DataTable.js
CHANGED
|
@@ -2,9 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import classNames from "classnames";
|
|
3
3
|
import DataTableHead from "./DataTableHead";
|
|
4
4
|
import DataTableTBody from "./DataTableTBody";
|
|
5
|
-
import { noop } from "./utils";
|
|
6
5
|
import Table from "./Table";
|
|
7
|
-
function DataTable({ fields, data, keyField, size = '', sticky, responsive, rowClassName, renderRow, onSelectRow
|
|
6
|
+
function DataTable({ fields, data, keyField, size = '', sticky, responsive, rowClassName, renderRow, onSelectRow, selected = '', className = '', tfoot, children, tableHeadProps, ...rest }) {
|
|
8
7
|
const tableClassName = classNames('table', className, {
|
|
9
8
|
[`table-${size}`]: !!size,
|
|
10
9
|
});
|
package/dist/DataTable.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../src/DataTable.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,OAAO,
|
|
1
|
+
{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../src/DataTable.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,OAAO,KAAK,MAAM,SAAS,CAAC;AAG5B,SAAS,SAAS,CAAc,EACI,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,IAAI,GAAG,EAAE,EACT,MAAM,EACN,UAAU,EACV,YAAY,EACZ,SAAS,EACT,WAAW,EACX,QAAQ,GAAG,EAAE,EACb,SAAS,GAAG,EAAE,EACd,KAAK,EACL,QAAQ,EACR,cAAc,EACd,GAAG,IAAI,EACS;IAEhD,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,EAAE,SAAS,EAAE;QAClD,CAAC,SAAS,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI;KAC5B,CAAC,CAAA;IAEF,OAAO,CACH,MAAC,KAAK,IAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,KAAM,IAAI,aAC9E,KAAC,aAAa,OAAK,cAAc,EAAE,MAAM,EAAE,MAAM,GAAG,EACnD,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,CACd,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAC1E,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAG,CAClE,EACA,QAAQ,EACR,KAAK,IACF,CACX,CAAA;AACL,CAAC;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AACpC,eAAe,SAAS,CAAC"}
|
package/dist/DataTableRow.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import classNames from "classnames";
|
|
3
|
-
import { noop } from "./utils";
|
|
4
3
|
import DataTableCell from "./DataTableCell";
|
|
5
|
-
function DataTableRow({ className, rowClassName, selected, fields, row, trRef, onClick
|
|
4
|
+
function DataTableRow({ className, rowClassName, selected, fields, row, trRef, onClick, ...rest }) {
|
|
6
5
|
const clickHandler = (ev) => {
|
|
7
|
-
|
|
6
|
+
onClick?.(row, ev);
|
|
8
7
|
};
|
|
9
8
|
const _className = typeof rowClassName === 'function' ? rowClassName(row) : rowClassName;
|
|
10
9
|
if (!row) {
|
package/dist/DataTableRow.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableRow.js","sourceRoot":"","sources":["../src/DataTableRow.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"DataTableRow.js","sourceRoot":"","sources":["../src/DataTableRow.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAG5C,SAAS,YAAY,CAAc,EACI,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,GAAG,EACH,KAAK,EACL,OAAO,EACP,GAAG,IAAI,EACY;IACtD,MAAM,YAAY,GAAG,CAAC,EAAmC,EAAE,EAAE;QACzD,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;IACtB,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,OAAO,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;IACzF,IAAI,CAAC,GAAG,EAAE,CAAC;QACP,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,aAAI,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,UAAU,CAAC,EAAC,cAAc,EAAE,QAAQ,EAAC,EAAE,SAAS,EAAE,UAAU,CAAC,EACxE,OAAO,EAAE,YAAY,KACjB,IAAI,YACP,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,KAAC,aAAa,IAAa,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IAA7B,KAAK,CAA2B,CAAC,CAAC,GACpF,CACR,CAAA;AACL,CAAC;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAC1C,eAAe,YAAY,CAAC"}
|
package/dist/DataTableTBody.js
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import DataTableRow from "./DataTableRow";
|
|
3
|
-
|
|
4
|
-
function DataTableTBody({ fields, data, keyField, rowClassName, renderRow, onSelectRow = noop, selected = '', children, ...rest }) {
|
|
3
|
+
function DataTableTBody({ fields, data, keyField, rowClassName, renderRow, onSelectRow, selected = '', children, ...rest }) {
|
|
5
4
|
return (_jsxs("tbody", { ...rest, children: [data.map(row => {
|
|
6
5
|
const keyValue = String(typeof keyField === "function" ? keyField(row) : row[keyField]);
|
|
7
6
|
const isSelected = typeof selected === 'function' ? selected(row) : keyValue === selected;
|
|
8
7
|
if (renderRow) {
|
|
9
8
|
return renderRow(row);
|
|
10
9
|
}
|
|
11
|
-
return (_jsx(DataTableRow, { onClick:
|
|
10
|
+
return (_jsx(DataTableRow, { onClick: onSelectRow, rowClassName: rowClassName, fields: fields, row: row, selected: isSelected }, keyValue));
|
|
12
11
|
}), children] }));
|
|
13
12
|
}
|
|
14
13
|
DataTableTBody.displayName = 'DataTableTBody';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableTBody.js","sourceRoot":"","sources":["../src/DataTableTBody.tsx"],"names":[],"mappings":";AACA,OAAO,YAAY,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"DataTableTBody.js","sourceRoot":"","sources":["../src/DataTableTBody.tsx"],"names":[],"mappings":";AACA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAI1C,SAAS,cAAc,CAAc,EACI,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,WAAW,EACX,QAAQ,GAAG,EAAE,EACb,QAAQ,EACR,GAAG,IAAI,EACc;IAC1D,OAAO,CACH,oBAAW,IAAI,aACd,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;gBACZ,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;gBACxF,MAAM,UAAU,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC;gBAC1F,IAAI,SAAS,EAAE,CAAC;oBACZ,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC;gBAC1B,CAAC;gBACD,OAAO,CACH,KAAC,YAAY,IAAgB,OAAO,EAAE,WAAW,EACnC,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,UAAU,IAHzB,QAAQ,CAGoB,CAClD,CAAA;YACL,CAAC,CAAC,EACD,QAAQ,IACD,CACX,CAAA;AACL,CAAC;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAC9C,eAAe,cAAc,CAAA"}
|
package/dist/SortableTable.js
CHANGED
|
@@ -2,9 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import classNames from "classnames";
|
|
3
3
|
import SortableTableHead from "./SortableTableHead";
|
|
4
4
|
import DataTableTBody from "./DataTableTBody";
|
|
5
|
-
import { noop } from "./utils";
|
|
6
5
|
import Table from "./Table";
|
|
7
|
-
function SortableTable({ fields, data, currentSort, onChangeSort, keyField, size = '', sticky, rowClassName, renderRow, onSelectRow
|
|
6
|
+
function SortableTable({ fields, data, currentSort, onChangeSort, keyField, size = '', sticky, rowClassName, renderRow, onSelectRow, selected = '', className = '', tfoot, children, ...rest }) {
|
|
8
7
|
const tableClassName = classNames('table', className, {
|
|
9
8
|
[`table-${size}`]: !!size,
|
|
10
9
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortableTable.js","sourceRoot":"","sources":["../src/SortableTable.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,OAAO,
|
|
1
|
+
{"version":3,"file":"SortableTable.js","sourceRoot":"","sources":["../src/SortableTable.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,OAAO,KAAK,MAAM,SAAS,CAAC;AAG5B,SAAS,aAAa,CAAc,EACI,MAAM,EACN,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,IAAI,GAAG,EAAE,EACT,MAAM,EACN,YAAY,EACZ,SAAS,EACT,WAAW,EACX,QAAQ,GAAG,EAAE,EACb,SAAS,GAAG,EAAE,EACd,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACa;IACxD,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,EAAE,SAAS,EAAE;QAClD,CAAC,SAAS,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI;KAC5B,CAAC,CAAA;IAEF,OAAO,CACH,MAAC,KAAK,IAAC,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,KAAM,IAAI,aACtD,KAAC,iBAAiB,IAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,GAAG,EACzF,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,CACd,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAC1E,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAG,CAClE,EACA,QAAQ,EACR,KAAK,IACF,CACX,CAAA;AACL,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAC5C,eAAe,aAAa,CAAC"}
|
package/dist/Table.js
CHANGED
|
@@ -15,14 +15,14 @@ const StyledTable = styled.table `
|
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
`;
|
|
18
|
-
export default React.forwardRef(function Table({ sticky, responsive, children, ...rest }, ref) {
|
|
18
|
+
export default React.forwardRef(function Table({ sticky, responsive, children, className, ...rest }, ref) {
|
|
19
19
|
if (responsive) {
|
|
20
|
-
const
|
|
20
|
+
const _className = classNames(className, {
|
|
21
21
|
'table-responsive': responsive === true,
|
|
22
22
|
[`table-responsive-${responsive}`]: responsive !== true,
|
|
23
23
|
});
|
|
24
|
-
return (_jsx("div", { className:
|
|
24
|
+
return (_jsx("div", { className: _className, children: _jsx(StyledTable, { ref: ref, ...rest, children: children }) }));
|
|
25
25
|
}
|
|
26
|
-
return (_jsx(StyledTable, { sticky: sticky, ref: ref, ...rest, children: children }));
|
|
26
|
+
return (_jsx(StyledTable, { className: className, sticky: sticky, ref: ref, ...rest, children: children }));
|
|
27
27
|
});
|
|
28
28
|
//# sourceMappingURL=Table.js.map
|
package/dist/Table.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../src/Table.tsx"],"names":[],"mappings":";AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAkB;0BACxB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS;;;;;;wBAMzC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;uBAC3C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;0BACjC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,gFAAgF,CAAC,CAAC,CAAC,OAAO;;;CAG3I,CAAA;AAED,eAAe,KAAK,CAAC,UAAU,CAC3B,SAAS,KAAK,CAAC,EACI,MAAM,EACN,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,GAAG;IACjB,IAAI,UAAU,EAAE,CAAC;QACb,MAAM,
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../src/Table.tsx"],"names":[],"mappings":";AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAkB;0BACxB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS;;;;;;wBAMzC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;uBAC3C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;0BACjC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,gFAAgF,CAAC,CAAC,CAAC,OAAO;;;CAG3I,CAAA;AAED,eAAe,KAAK,CAAC,UAAU,CAC3B,SAAS,KAAK,CAAC,EACI,MAAM,EACN,UAAU,EACV,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EAAE,GAAG;IACjB,IAAI,UAAU,EAAE,CAAC;QACb,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,EAAE;YACrC,kBAAkB,EAAE,UAAU,KAAK,IAAI;YACvC,CAAC,oBAAoB,UAAU,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI;SAC1D,CAAC,CAAA;QACF,OAAO,CACH,cAAK,SAAS,EAAE,UAAU,YACtB,KAAC,WAAW,IAAC,GAAG,EAAE,GAAG,KAAM,IAAI,YAAG,QAAQ,GAAe,GACvD,CACT,CAAA;IACL,CAAC;IACD,OAAO,CACH,KAAC,WAAW,IAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAM,IAAI,YAAG,QAAQ,GAAe,CAClG,CAAA;AACL,CAAC,CAAC,CAAA"}
|
package/dist/types.d.ts
CHANGED
|
@@ -32,7 +32,7 @@ export interface DataTableProps<T = unknown> extends TableHTMLAttributes<HTMLTab
|
|
|
32
32
|
responsive?: boolean | "sm" | "md" | "lg" | "xl" | 'xxl';
|
|
33
33
|
rowClassName?: DataTableClassNames<T>;
|
|
34
34
|
renderRow?: (row: T) => React.ReactNode;
|
|
35
|
-
onSelectRow?: (row: T, ev?: MouseEvent<HTMLTableRowElement>) =>
|
|
35
|
+
onSelectRow?: (row: T, ev?: MouseEvent<HTMLTableRowElement>) => void;
|
|
36
36
|
selected?: string | number | ((row: T) => boolean);
|
|
37
37
|
tfoot?: React.ReactElement<HTMLTableSectionElement>;
|
|
38
38
|
tableHeadProps?: DataTableHeadProps<T>;
|
|
@@ -57,7 +57,7 @@ export interface DataTableTBodyProps<T = unknown> extends TableHTMLAttributes<HT
|
|
|
57
57
|
keyField: keyof T | ((row: T) => string | number);
|
|
58
58
|
rowClassName?: DataTableClassNames<T>;
|
|
59
59
|
renderRow?: (row: T) => React.ReactNode;
|
|
60
|
-
onSelectRow?: (row: T, ev?: MouseEvent<HTMLTableRowElement>) =>
|
|
60
|
+
onSelectRow?: (row: T, ev?: MouseEvent<HTMLTableRowElement>) => void;
|
|
61
61
|
selected?: string | number | ((row: T) => boolean);
|
|
62
62
|
children?: ReactNode;
|
|
63
63
|
}
|
|
@@ -67,7 +67,7 @@ export interface DataTableRowProps<T = unknown> extends Omit<TableHTMLAttributes
|
|
|
67
67
|
fields: DataTableField<T>[];
|
|
68
68
|
row: T;
|
|
69
69
|
trRef?: React.Ref<HTMLTableRowElement>;
|
|
70
|
-
onClick?: (ev?: MouseEvent<HTMLTableRowElement>) => void;
|
|
70
|
+
onClick?: (row: T, ev?: MouseEvent<HTMLTableRowElement>) => void;
|
|
71
71
|
}
|
|
72
72
|
export interface SortableTableProps<T = unknown> extends DataTableProps<T> {
|
|
73
73
|
fields: SortableTableField<T>[];
|
package/package.json
CHANGED
package/src/DataTable.tsx
CHANGED
|
@@ -3,7 +3,6 @@ import classNames from "classnames";
|
|
|
3
3
|
import DataTableHead from "./DataTableHead";
|
|
4
4
|
import DataTableTBody from "./DataTableTBody";
|
|
5
5
|
import {DataTableProps} from "./types";
|
|
6
|
-
import {noop} from "./utils";
|
|
7
6
|
import Table from "./Table";
|
|
8
7
|
|
|
9
8
|
|
|
@@ -16,7 +15,7 @@ function DataTable<T = unknown>({
|
|
|
16
15
|
responsive,
|
|
17
16
|
rowClassName,
|
|
18
17
|
renderRow,
|
|
19
|
-
onSelectRow
|
|
18
|
+
onSelectRow,
|
|
20
19
|
selected = '',
|
|
21
20
|
className = '',
|
|
22
21
|
tfoot,
|
package/src/DataTableRow.tsx
CHANGED
|
@@ -1,22 +1,21 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, {MouseEvent} from 'react';
|
|
2
2
|
import classNames from "classnames";
|
|
3
|
-
import {noop} from "./utils";
|
|
4
3
|
import {DataTableRowProps} from "./types";
|
|
5
4
|
import DataTableCell from "./DataTableCell";
|
|
6
5
|
|
|
7
6
|
|
|
8
7
|
function DataTableRow<T = unknown>({
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const clickHandler = (ev:MouseEvent<HTMLTableRowElement>) => {
|
|
19
|
-
|
|
8
|
+
className,
|
|
9
|
+
rowClassName,
|
|
10
|
+
selected,
|
|
11
|
+
fields,
|
|
12
|
+
row,
|
|
13
|
+
trRef,
|
|
14
|
+
onClick,
|
|
15
|
+
...rest
|
|
16
|
+
}: DataTableRowProps<T>) {
|
|
17
|
+
const clickHandler = (ev: MouseEvent<HTMLTableRowElement>) => {
|
|
18
|
+
onClick?.(row, ev)
|
|
20
19
|
}
|
|
21
20
|
|
|
22
21
|
const _className = typeof rowClassName === 'function' ? rowClassName(row) : rowClassName;
|
|
@@ -29,7 +28,7 @@ function DataTableRow<T = unknown>({
|
|
|
29
28
|
className={classNames({'table-active': selected}, className, _className)}
|
|
30
29
|
onClick={clickHandler}
|
|
31
30
|
{...rest}>
|
|
32
|
-
{fields.map((field, index) => (<DataTableCell key={index} field={field} row={row}
|
|
31
|
+
{fields.map((field, index) => (<DataTableCell key={index} field={field} row={row}/>))}
|
|
33
32
|
</tr>
|
|
34
33
|
)
|
|
35
34
|
}
|
package/src/DataTableTBody.tsx
CHANGED
|
@@ -1,22 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import DataTableRow from "./DataTableRow";
|
|
3
|
-
import {noop} from "./utils";
|
|
4
3
|
import {DataTableTBodyProps} from "./types";
|
|
5
4
|
|
|
6
5
|
|
|
7
|
-
|
|
8
6
|
function DataTableTBody<T = unknown>({
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
7
|
+
fields,
|
|
8
|
+
data,
|
|
9
|
+
keyField,
|
|
10
|
+
rowClassName,
|
|
11
|
+
renderRow,
|
|
12
|
+
onSelectRow,
|
|
13
|
+
selected = '',
|
|
14
|
+
children,
|
|
15
|
+
...rest
|
|
16
|
+
}: DataTableTBodyProps<T>) {
|
|
20
17
|
return (
|
|
21
18
|
<tbody {...rest}>
|
|
22
19
|
{data.map(row => {
|
|
@@ -26,7 +23,7 @@ function DataTableTBody<T = unknown>({
|
|
|
26
23
|
return renderRow(row);
|
|
27
24
|
}
|
|
28
25
|
return (
|
|
29
|
-
<DataTableRow key={keyValue} onClick={
|
|
26
|
+
<DataTableRow key={keyValue} onClick={onSelectRow}
|
|
30
27
|
rowClassName={rowClassName}
|
|
31
28
|
fields={fields}
|
|
32
29
|
row={row} selected={isSelected}/>
|
|
@@ -36,5 +33,6 @@ function DataTableTBody<T = unknown>({
|
|
|
36
33
|
</tbody>
|
|
37
34
|
)
|
|
38
35
|
}
|
|
36
|
+
|
|
39
37
|
DataTableTBody.displayName = 'DataTableTBody';
|
|
40
38
|
export default DataTableTBody
|
package/src/SortableTable.tsx
CHANGED
|
@@ -3,7 +3,6 @@ import classNames from "classnames";
|
|
|
3
3
|
import SortableTableHead from "./SortableTableHead";
|
|
4
4
|
import DataTableTBody from "./DataTableTBody";
|
|
5
5
|
import {SortableTableProps} from "./types";
|
|
6
|
-
import {noop} from "./utils";
|
|
7
6
|
import Table from "./Table";
|
|
8
7
|
|
|
9
8
|
|
|
@@ -17,7 +16,7 @@ function SortableTable<T = unknown>({
|
|
|
17
16
|
sticky,
|
|
18
17
|
rowClassName,
|
|
19
18
|
renderRow,
|
|
20
|
-
onSelectRow
|
|
19
|
+
onSelectRow,
|
|
21
20
|
selected = '',
|
|
22
21
|
className = '',
|
|
23
22
|
tfoot,
|
package/src/Table.tsx
CHANGED
|
@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
|
|
|
3
3
|
import {DataTableProps} from "./types";
|
|
4
4
|
import classNames from "classnames";
|
|
5
5
|
|
|
6
|
-
export type StyledTableProps = TableHTMLAttributes<HTMLTableElement> & Pick<DataTableProps, 'sticky'|'responsive'>
|
|
6
|
+
export type StyledTableProps = TableHTMLAttributes<HTMLTableElement> & Pick<DataTableProps, 'sticky' | 'responsive'>
|
|
7
7
|
|
|
8
8
|
const StyledTable = styled.table<StyledTableProps>`
|
|
9
9
|
--table-sticky-top: ${props => props.sticky ? '0' : undefined};
|
|
@@ -24,20 +24,21 @@ export default React.forwardRef<HTMLTableElement, StyledTableProps>(
|
|
|
24
24
|
sticky,
|
|
25
25
|
responsive,
|
|
26
26
|
children,
|
|
27
|
+
className,
|
|
27
28
|
...rest
|
|
28
29
|
}, ref) {
|
|
29
30
|
if (responsive) {
|
|
30
|
-
const
|
|
31
|
+
const _className = classNames(className, {
|
|
31
32
|
'table-responsive': responsive === true,
|
|
32
33
|
[`table-responsive-${responsive}`]: responsive !== true,
|
|
33
34
|
})
|
|
34
35
|
return (
|
|
35
|
-
<div className={
|
|
36
|
+
<div className={_className}>
|
|
36
37
|
<StyledTable ref={ref} {...rest}>{children}</StyledTable>
|
|
37
38
|
</div>
|
|
38
39
|
)
|
|
39
40
|
}
|
|
40
41
|
return (
|
|
41
|
-
<StyledTable sticky={sticky} ref={ref} {...rest}>{children}</StyledTable>
|
|
42
|
+
<StyledTable className={className} sticky={sticky} ref={ref} {...rest}>{children}</StyledTable>
|
|
42
43
|
)
|
|
43
44
|
})
|
package/src/types.ts
CHANGED
|
@@ -44,7 +44,7 @@ export interface DataTableProps<T = unknown> extends TableHTMLAttributes<HTMLTab
|
|
|
44
44
|
responsive?: boolean|"sm" | "md" | "lg" | "xl" | 'xxl';
|
|
45
45
|
rowClassName?: DataTableClassNames<T>;
|
|
46
46
|
renderRow?: (row: T) => React.ReactNode;
|
|
47
|
-
onSelectRow?: (row: T, ev?:MouseEvent<HTMLTableRowElement>) =>
|
|
47
|
+
onSelectRow?: (row: T, ev?:MouseEvent<HTMLTableRowElement>) => void;
|
|
48
48
|
selected?: string | number | ((row: T) => boolean);
|
|
49
49
|
tfoot?: React.ReactElement<HTMLTableSectionElement>;
|
|
50
50
|
tableHeadProps?: DataTableHeadProps<T>;
|
|
@@ -73,18 +73,18 @@ export interface DataTableTBodyProps<T = unknown> extends TableHTMLAttributes<HT
|
|
|
73
73
|
keyField: keyof T | ((row: T) => string|number);
|
|
74
74
|
rowClassName?: DataTableClassNames<T>;
|
|
75
75
|
renderRow?: (row: T) => React.ReactNode;
|
|
76
|
-
onSelectRow?: (row: T, ev?:MouseEvent<HTMLTableRowElement>) =>
|
|
76
|
+
onSelectRow?: (row: T, ev?:MouseEvent<HTMLTableRowElement>) => void;
|
|
77
77
|
selected?: string | number | ((row: T) => boolean);
|
|
78
78
|
children?: ReactNode;
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
-
export interface DataTableRowProps<T = unknown> extends Omit
|
|
81
|
+
export interface DataTableRowProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableRowElement>, 'onClick'> {
|
|
82
82
|
rowClassName?: string | classNames.Argument | ((row: T) => string | classNames.Argument);
|
|
83
83
|
selected?: boolean;
|
|
84
84
|
fields: DataTableField<T>[];
|
|
85
85
|
row: T;
|
|
86
86
|
trRef?: React.Ref<HTMLTableRowElement>;
|
|
87
|
-
onClick?: (ev?:MouseEvent<HTMLTableRowElement>) => void;
|
|
87
|
+
onClick?: (row:T, ev?:MouseEvent<HTMLTableRowElement>) => void;
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
export interface SortableTableProps<T = unknown> extends DataTableProps<T> {
|
package/dist/utils.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function noop(): void;
|
package/dist/utils.js
DELETED
package/dist/utils.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,IAAI,KAAG,CAAC"}
|
package/src/utils.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export function noop(){}
|