ms-react-table 1.0.0
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/README.md +203 -0
- package/dist/index.css +253 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.mts +45 -0
- package/dist/index.d.ts +45 -0
- package/dist/index.js +517 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +480 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +43 -0
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,480 @@
|
|
|
1
|
+
// src/MsReactTable.tsx
|
|
2
|
+
import React5 from "react";
|
|
3
|
+
|
|
4
|
+
// src/contextAPI/MsTableProvider.tsx
|
|
5
|
+
import { useState as useState3, useMemo as useMemo2, useCallback, useEffect as useEffect2, useRef as useRef2 } from "react";
|
|
6
|
+
|
|
7
|
+
// src/contextAPI/MsTableContext.tsx
|
|
8
|
+
import { createContext, useContext } from "react";
|
|
9
|
+
var TableContext = createContext(
|
|
10
|
+
null
|
|
11
|
+
);
|
|
12
|
+
var MsTableContext_default = TableContext;
|
|
13
|
+
var useTable = () => {
|
|
14
|
+
const ctx = useContext(TableContext);
|
|
15
|
+
if (!ctx) throw new Error("useTable must be used inside TableProvider");
|
|
16
|
+
return ctx;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
// src/components/HeaderActionMenu/HeaderActionMenu.tsx
|
|
20
|
+
import { useEffect, useState as useState2 } from "react";
|
|
21
|
+
|
|
22
|
+
// src/_assets/icons/index.tsx
|
|
23
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
24
|
+
var verticleThreeDotsIcon = /* @__PURE__ */ jsxs("svg", { width: "3", height: "13", viewBox: "0 0 3 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
25
|
+
/* @__PURE__ */ jsx("ellipse", { cx: "1.5", cy: "1.5", rx: "1.5", ry: "1.5", transform: "matrix(-4.37114e-08 1 1 4.37114e-08 0 10)", fill: "#2F2F2F" }),
|
|
26
|
+
/* @__PURE__ */ jsx("ellipse", { cx: "1.5", cy: "1.5", rx: "1.5", ry: "1.5", transform: "matrix(-4.37114e-08 1 1 4.37114e-08 0 5)", fill: "#2F2F2F" }),
|
|
27
|
+
/* @__PURE__ */ jsx("ellipse", { cx: "1.5", cy: "1.5", rx: "1.5", ry: "1.5", transform: "matrix(-4.37114e-08 1 1 4.37114e-08 0 0)", fill: "#2F2F2F" })
|
|
28
|
+
] });
|
|
29
|
+
var angleRightIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", viewBox: "0 0 256 256", children: /* @__PURE__ */ jsx("path", { d: "M141.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L124.69,128,50.34,53.66A8,8,0,0,1,61.66,42.34l80,80A8,8,0,0,1,141.66,133.66Zm80-11.32-80-80a8,8,0,0,0-11.32,11.32L204.69,128l-74.35,74.34a8,8,0,0,0,11.32,11.32l80-80A8,8,0,0,0,221.66,122.34Z" }) });
|
|
30
|
+
var angleLeftIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", viewBox: "0 0 256 256", children: /* @__PURE__ */ jsx("path", { d: "M205.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L131.31,128ZM51.31,128l74.35-74.34a8,8,0,0,0-11.32-11.32l-80,80a8,8,0,0,0,0,11.32l80,80a8,8,0,0,0,11.32-11.32Z" }) });
|
|
31
|
+
var angleDownIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", viewBox: "0 0 256 256", children: /* @__PURE__ */ jsx("path", { d: "M213.66,130.34a8,8,0,0,1,0,11.32l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,204.69l74.34-74.35A8,8,0,0,1,213.66,130.34Zm-91.32,11.32a8,8,0,0,0,11.32,0l80-80a8,8,0,0,0-11.32-11.32L128,124.69,53.66,50.34A8,8,0,0,0,42.34,61.66Z" }) });
|
|
32
|
+
var angleUpIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", viewBox: "0 0 256 256", children: /* @__PURE__ */ jsx("path", { d: "M213.66,194.34a8,8,0,0,1-11.32,11.32L128,131.31,53.66,205.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0Zm-160-68.68L128,51.31l74.34,74.35a8,8,0,0,0,11.32-11.32l-80-80a8,8,0,0,0-11.32,0l-80,80a8,8,0,0,0,11.32,11.32Z" }) });
|
|
33
|
+
var reloadIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", viewBox: "0 0 256 256", children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M224 128a96 96 0 0 1-94.71 96H128a95.38 95.38 0 0 1-65.9-26.2a8 8 0 0 1 11-11.63a80 80 0 1 0-1.67-114.78a3 3 0 0 1-.26.25L44.59 96H72a8 8 0 0 1 0 16H24a8 8 0 0 1-8-8V56a8 8 0 0 1 16 0v29.8L60.25 60A96 96 0 0 1 224 128" }) });
|
|
34
|
+
var prevIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", viewBox: "0 0 256 256", children: /* @__PURE__ */ jsx("path", { d: "M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z" }) });
|
|
35
|
+
var nextIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", viewBox: "0 0 256 256", children: /* @__PURE__ */ jsx("path", { d: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" }) });
|
|
36
|
+
var doublePipeArrow = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", viewBox: "0 0 256 256", children: /* @__PURE__ */ jsx("path", { d: "M112,48V208a8,8,0,0,1-16,0V136H43.31l18.35,18.34a8,8,0,0,1-11.32,11.32l-32-32a8,8,0,0,1,0-11.32l32-32a8,8,0,0,1,11.32,11.32L43.31,120H96V48a8,8,0,0,1,16,0Zm125.66,74.34-32-32a8,8,0,0,0-11.32,11.32L212.69,120H160V48a8,8,0,0,0-16,0V208a8,8,0,0,0,16,0V136h52.69l-18.35,18.34a8,8,0,0,0,11.32,11.32l32-32A8,8,0,0,0,237.66,122.34Z" }) });
|
|
37
|
+
var hideShow = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", viewBox: "0 0 256 256", children: /* @__PURE__ */ jsx("path", { d: "M64,105V40a8,8,0,0,0-16,0v65a32,32,0,0,0,0,62v49a8,8,0,0,0,16,0V167a32,32,0,0,0,0-62Zm-8,47a16,16,0,1,1,16-16A16,16,0,0,1,56,152Zm80-95V40a8,8,0,0,0-16,0V57a32,32,0,0,0,0,62v97a8,8,0,0,0,16,0V119a32,32,0,0,0,0-62Zm-8,47a16,16,0,1,1,16-16A16,16,0,0,1,128,104Zm104,64a32.06,32.06,0,0,0-24-31V40a8,8,0,0,0-16,0v97a32,32,0,0,0,0,62v17a8,8,0,0,0,16,0V199A32.06,32.06,0,0,0,232,168Zm-32,16a16,16,0,1,1,16-16A16,16,0,0,1,200,184Z" }) });
|
|
38
|
+
|
|
39
|
+
// src/components/HeaderActionMenu/HeaderActionMenu.tsx
|
|
40
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
41
|
+
var HeaderActionMenu = (props) => {
|
|
42
|
+
const { state, api: { onColumnPin, onSortColumn, onAutoColumnResize, onColumnReset, updateState } } = useTable();
|
|
43
|
+
const [showColumnList, toggleColumnList] = useState2(false);
|
|
44
|
+
const [columnList, setColumnList] = useState2(state.colConfigs);
|
|
45
|
+
const [searchkey, setSearchkey] = useState2("");
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
setColumnList(state.colConfigs);
|
|
48
|
+
onSearchHeader(searchkey);
|
|
49
|
+
}, [state.colConfigs]);
|
|
50
|
+
const onCheckboxChange = (dataIndex, e) => {
|
|
51
|
+
let newConfig = state.colConfigs.map((item) => {
|
|
52
|
+
return {
|
|
53
|
+
...item,
|
|
54
|
+
isHidden: item.dataIndex == dataIndex ? !e.target.checked : item.isHidden || false
|
|
55
|
+
};
|
|
56
|
+
});
|
|
57
|
+
updateState({
|
|
58
|
+
...state,
|
|
59
|
+
colConfigs: newConfig
|
|
60
|
+
});
|
|
61
|
+
setColumnList(newConfig);
|
|
62
|
+
};
|
|
63
|
+
const onSearchHeader = (value) => {
|
|
64
|
+
let newlist = [];
|
|
65
|
+
if (value) {
|
|
66
|
+
state.colConfigs.map((item) => {
|
|
67
|
+
if (item.title.toLowerCase().includes(value.toLowerCase())) {
|
|
68
|
+
newlist.push(item);
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
setColumnList(newlist);
|
|
72
|
+
} else {
|
|
73
|
+
setColumnList(state.colConfigs);
|
|
74
|
+
}
|
|
75
|
+
setSearchkey(value);
|
|
76
|
+
};
|
|
77
|
+
return /* @__PURE__ */ jsx2("div", { ref: props.ref, className: "header-menu", style: props.style, children: showColumnList ? /* @__PURE__ */ jsxs2("div", { className: "column-list", children: [
|
|
78
|
+
/* @__PURE__ */ jsx2("div", { className: "search", children: /* @__PURE__ */ jsx2("input", { type: "text", placeholder: "Search header", className: "search-input", onChange: (e) => onSearchHeader(e.target.value) }) }),
|
|
79
|
+
/* @__PURE__ */ jsx2("div", { className: "list", children: columnList.map((item) => /* @__PURE__ */ jsxs2("div", { className: "item", children: [
|
|
80
|
+
/* @__PURE__ */ jsx2("input", { className: "ms-checkbox-input", type: "checkbox", id: item.dataIndex, checked: !item.isHidden, onChange: (e) => onCheckboxChange(item.dataIndex, e) }),
|
|
81
|
+
/* @__PURE__ */ jsx2("label", { htmlFor: item.dataIndex, children: item.title })
|
|
82
|
+
] }, item.dataIndex + "_item")) })
|
|
83
|
+
] }) : /* @__PURE__ */ jsxs2("ul", { children: [
|
|
84
|
+
/* @__PURE__ */ jsxs2("li", { onClick: () => onSortColumn(props.dataIndex, "asc"), children: [
|
|
85
|
+
/* @__PURE__ */ jsx2("span", { children: angleUpIcon }),
|
|
86
|
+
`Sort By Ascending`
|
|
87
|
+
] }),
|
|
88
|
+
/* @__PURE__ */ jsxs2("li", { onClick: () => onSortColumn(props.dataIndex, "desc"), children: [
|
|
89
|
+
/* @__PURE__ */ jsx2("span", { children: angleDownIcon }),
|
|
90
|
+
`Sort By Descending`
|
|
91
|
+
] }),
|
|
92
|
+
/* @__PURE__ */ jsxs2("li", { onClick: () => onAutoColumnResize("all"), children: [
|
|
93
|
+
/* @__PURE__ */ jsx2("span", { children: doublePipeArrow }),
|
|
94
|
+
`Autosize All Column`
|
|
95
|
+
] }),
|
|
96
|
+
/* @__PURE__ */ jsxs2("li", { onClick: () => toggleColumnList(true), children: [
|
|
97
|
+
/* @__PURE__ */ jsx2("span", { children: hideShow }),
|
|
98
|
+
`Hide/Show Columns`
|
|
99
|
+
] }),
|
|
100
|
+
/* @__PURE__ */ jsxs2("li", { onClick: onColumnReset, children: [
|
|
101
|
+
/* @__PURE__ */ jsx2("span", { children: reloadIcon }),
|
|
102
|
+
`Reset Columns`
|
|
103
|
+
] })
|
|
104
|
+
] }) });
|
|
105
|
+
};
|
|
106
|
+
var HeaderActionMenu_default = HeaderActionMenu;
|
|
107
|
+
|
|
108
|
+
// src/components/Overlay.tsx
|
|
109
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
110
|
+
var Overlay = (props) => {
|
|
111
|
+
const { message = "No Records to show", style } = props;
|
|
112
|
+
return /* @__PURE__ */ jsx3("div", { className: "overlay-message", style, children: message });
|
|
113
|
+
};
|
|
114
|
+
var Overlay_default = Overlay;
|
|
115
|
+
|
|
116
|
+
// src/components/HelperFunction.ts
|
|
117
|
+
function sortData(data, dataIndex, sortBy) {
|
|
118
|
+
return [...data].sort((a, b) => {
|
|
119
|
+
const valA = a[dataIndex];
|
|
120
|
+
const valB = b[dataIndex];
|
|
121
|
+
if (typeof valA === "number" && typeof valB === "number") {
|
|
122
|
+
return sortBy === "asc" ? valA - valB : valB - valA;
|
|
123
|
+
}
|
|
124
|
+
const strA = String(valA).toLowerCase();
|
|
125
|
+
const strB = String(valB).toLowerCase();
|
|
126
|
+
if (strA === strB) return 0;
|
|
127
|
+
const comparison = strA < strB ? -1 : 1;
|
|
128
|
+
return sortBy === "asc" ? comparison : -comparison;
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// src/contextAPI/MsTableProvider.tsx
|
|
133
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
134
|
+
var TableProvider = (props) => {
|
|
135
|
+
const actionMenuRef = useRef2(null);
|
|
136
|
+
const {
|
|
137
|
+
columns,
|
|
138
|
+
data,
|
|
139
|
+
children,
|
|
140
|
+
pageSizeOptions = [],
|
|
141
|
+
isClientSideRendering = true,
|
|
142
|
+
totalRecords,
|
|
143
|
+
tbodyRef,
|
|
144
|
+
theadRef,
|
|
145
|
+
onRowClick
|
|
146
|
+
} = props;
|
|
147
|
+
const tbodyHeight = tbodyRef?.current?.clientHeight;
|
|
148
|
+
const theadHeight = theadRef?.current?.clientHeight;
|
|
149
|
+
const [showActionMenu, setActionMenu] = useState3(false);
|
|
150
|
+
const [selectedHeaderCell, setHeaderCell] = useState3("");
|
|
151
|
+
const [menuPosition, setMenuPosition] = useState3({
|
|
152
|
+
top: 0,
|
|
153
|
+
right: 0,
|
|
154
|
+
left: 0
|
|
155
|
+
});
|
|
156
|
+
const [state, setState] = useState3({
|
|
157
|
+
prevColConfig: columns,
|
|
158
|
+
colConfigs: columns,
|
|
159
|
+
rowData: [],
|
|
160
|
+
allRowData: data,
|
|
161
|
+
currentPage: 1,
|
|
162
|
+
pageSize: pageSizeOptions.length > 0 ? pageSizeOptions[0] : 50,
|
|
163
|
+
totalRecords: isClientSideRendering ? data.length : props?.totalRecords || 0,
|
|
164
|
+
selectedRows: [],
|
|
165
|
+
pageSizeOptions: pageSizeOptions.length > 0 ? pageSizeOptions : [50, 100, 200, 500],
|
|
166
|
+
isAutoSizeAllColumns: false
|
|
167
|
+
});
|
|
168
|
+
useEffect2(() => {
|
|
169
|
+
if (isClientSideRendering) {
|
|
170
|
+
const { currentPage, pageSize } = state;
|
|
171
|
+
let list = data.slice(currentPage - 1, pageSize * currentPage - 1);
|
|
172
|
+
setState((prevState) => ({
|
|
173
|
+
...prevState,
|
|
174
|
+
rowData: list
|
|
175
|
+
}));
|
|
176
|
+
}
|
|
177
|
+
}, []);
|
|
178
|
+
const onRowSelect = useCallback((rowData) => {
|
|
179
|
+
setState((prevState) => ({
|
|
180
|
+
...prevState,
|
|
181
|
+
selectedRows: [...prevState.selectedRows, rowData]
|
|
182
|
+
}));
|
|
183
|
+
onRowClick ? onRowClick(rowData) : null;
|
|
184
|
+
}, []);
|
|
185
|
+
const onColumnResize = useCallback((dataIndex, newWidth) => {
|
|
186
|
+
setState((prevState) => ({
|
|
187
|
+
...prevState,
|
|
188
|
+
colConfigs: prevState.colConfigs.map(
|
|
189
|
+
(col) => col.dataIndex === dataIndex ? { ...col, width: newWidth } : col
|
|
190
|
+
),
|
|
191
|
+
isAutoSizeAllColumns: false
|
|
192
|
+
}));
|
|
193
|
+
}, []);
|
|
194
|
+
const onPageChange = (direction) => {
|
|
195
|
+
const { pageSize, totalRecords: totalRecords2, allRowData, currentPage } = state;
|
|
196
|
+
var goToPageNo = 0;
|
|
197
|
+
if (direction == "first") {
|
|
198
|
+
goToPageNo = 1;
|
|
199
|
+
} else if (direction == "last") {
|
|
200
|
+
goToPageNo = Math.ceil(totalRecords2 / pageSize);
|
|
201
|
+
} else if (direction == "next") {
|
|
202
|
+
goToPageNo = currentPage + 1;
|
|
203
|
+
} else if (direction == "prev") {
|
|
204
|
+
goToPageNo = currentPage - 1;
|
|
205
|
+
}
|
|
206
|
+
let list = data.slice(goToPageNo - 1, pageSize * goToPageNo - 1);
|
|
207
|
+
setState((prevState) => ({
|
|
208
|
+
...prevState,
|
|
209
|
+
currentPage: goToPageNo,
|
|
210
|
+
rowData: list
|
|
211
|
+
}));
|
|
212
|
+
};
|
|
213
|
+
const onPageSizeChange = (pageSize) => {
|
|
214
|
+
const { allRowData } = state;
|
|
215
|
+
let list = allRowData.slice(0, pageSize - 1);
|
|
216
|
+
setState((prevState) => ({
|
|
217
|
+
...prevState,
|
|
218
|
+
currentPage: 1,
|
|
219
|
+
pageSize,
|
|
220
|
+
rowData: list
|
|
221
|
+
}));
|
|
222
|
+
};
|
|
223
|
+
const toggleActionMenu = (dataIndex, showMenu, ref) => {
|
|
224
|
+
const position = ref.current.getBoundingClientRect();
|
|
225
|
+
let left = position.x + position.width;
|
|
226
|
+
setMenuPosition({
|
|
227
|
+
top: position.height,
|
|
228
|
+
right: 0,
|
|
229
|
+
left: left > 200 ? left - 200 : position.x
|
|
230
|
+
});
|
|
231
|
+
setActionMenu(true);
|
|
232
|
+
setHeaderCell(dataIndex);
|
|
233
|
+
};
|
|
234
|
+
const onSortColumn = (dataIndex, sortBy) => {
|
|
235
|
+
let columns2 = state.colConfigs.map((item) => {
|
|
236
|
+
return {
|
|
237
|
+
...item,
|
|
238
|
+
sortKey: dataIndex == item.dataIndex ? sortBy : ""
|
|
239
|
+
};
|
|
240
|
+
});
|
|
241
|
+
if (sortBy == "") {
|
|
242
|
+
setState((prevState) => ({
|
|
243
|
+
...prevState,
|
|
244
|
+
colConfigs: columns2,
|
|
245
|
+
rowData: data
|
|
246
|
+
}));
|
|
247
|
+
return;
|
|
248
|
+
}
|
|
249
|
+
let sortedList = sortData(data, dataIndex, sortBy);
|
|
250
|
+
setState((prevState) => ({
|
|
251
|
+
...prevState,
|
|
252
|
+
colConfigs: columns2,
|
|
253
|
+
rowData: sortedList
|
|
254
|
+
}));
|
|
255
|
+
setActionMenu(false);
|
|
256
|
+
setHeaderCell("");
|
|
257
|
+
};
|
|
258
|
+
const onColumnPin = (pinDirection) => {
|
|
259
|
+
const { colConfigs } = state;
|
|
260
|
+
let newConfig = colConfigs.map((item) => {
|
|
261
|
+
if (item.dataIndex === selectedHeaderCell) {
|
|
262
|
+
item.pinned = pinDirection;
|
|
263
|
+
}
|
|
264
|
+
return item;
|
|
265
|
+
});
|
|
266
|
+
setState((prevState) => ({
|
|
267
|
+
...prevState,
|
|
268
|
+
colConfigs: newConfig
|
|
269
|
+
}));
|
|
270
|
+
};
|
|
271
|
+
const onAutoColumnResize = (dataIndex) => {
|
|
272
|
+
if (dataIndex == "all") {
|
|
273
|
+
setState((prevState) => ({
|
|
274
|
+
...prevState,
|
|
275
|
+
isAutoSizeAllColumns: true
|
|
276
|
+
}));
|
|
277
|
+
setActionMenu(false);
|
|
278
|
+
} else {
|
|
279
|
+
}
|
|
280
|
+
};
|
|
281
|
+
const onColumnReset = () => {
|
|
282
|
+
setState({
|
|
283
|
+
prevColConfig: columns,
|
|
284
|
+
colConfigs: columns,
|
|
285
|
+
rowData: data,
|
|
286
|
+
allRowData: data,
|
|
287
|
+
currentPage: 1,
|
|
288
|
+
pageSize: pageSizeOptions.length > 0 ? pageSizeOptions[0] : 50,
|
|
289
|
+
totalRecords: isClientSideRendering ? data.length : props?.totalRecords || 0,
|
|
290
|
+
selectedRows: [],
|
|
291
|
+
pageSizeOptions: pageSizeOptions.length > 0 ? pageSizeOptions : [50, 100, 200, 500],
|
|
292
|
+
isAutoSizeAllColumns: false
|
|
293
|
+
});
|
|
294
|
+
setActionMenu(false);
|
|
295
|
+
};
|
|
296
|
+
const updateState = useCallback((newState) => {
|
|
297
|
+
setState((prev) => ({
|
|
298
|
+
...prev,
|
|
299
|
+
...newState
|
|
300
|
+
}));
|
|
301
|
+
}, []);
|
|
302
|
+
const api = useMemo2(
|
|
303
|
+
() => ({
|
|
304
|
+
onRowSelect,
|
|
305
|
+
onColumnResize,
|
|
306
|
+
onAutoColumnResize,
|
|
307
|
+
onPageChange,
|
|
308
|
+
onPageSizeChange,
|
|
309
|
+
toggleActionMenu,
|
|
310
|
+
onColumnPin,
|
|
311
|
+
onSortColumn,
|
|
312
|
+
updateState,
|
|
313
|
+
onColumnReset
|
|
314
|
+
}),
|
|
315
|
+
[onRowSelect, onColumnResize, onAutoColumnResize, onPageChange, onPageSizeChange, toggleActionMenu, onColumnPin, onSortColumn, updateState, onColumnReset]
|
|
316
|
+
);
|
|
317
|
+
const contextValue = useMemo2(
|
|
318
|
+
() => ({ state, api }),
|
|
319
|
+
[state, api]
|
|
320
|
+
);
|
|
321
|
+
useEffect2(() => {
|
|
322
|
+
function handleClickOutside(event) {
|
|
323
|
+
if (actionMenuRef && "current" in actionMenuRef && actionMenuRef.current && !actionMenuRef.current.contains(event.target)) {
|
|
324
|
+
setActionMenu(false);
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
328
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
329
|
+
}, [actionMenuRef, setActionMenu]);
|
|
330
|
+
return /* @__PURE__ */ jsx4(MsTableContext_default.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs3("div", { className: `table-wrapper ${state.isAutoSizeAllColumns ? "ms-auto-width" : ""}`, children: [
|
|
331
|
+
children,
|
|
332
|
+
state.rowData.length == 0 && /* @__PURE__ */ jsx4(Overlay_default, { style: { height: tbodyHeight, top: theadHeight } }),
|
|
333
|
+
showActionMenu && /* @__PURE__ */ jsx4(HeaderActionMenu_default, { ref: actionMenuRef, dataIndex: selectedHeaderCell, style: { top: menuPosition.top, left: menuPosition.left } })
|
|
334
|
+
] }) });
|
|
335
|
+
};
|
|
336
|
+
|
|
337
|
+
// src/components/Header/HeaderCell.tsx
|
|
338
|
+
import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
|
|
339
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
340
|
+
var HeaderCell = (props) => {
|
|
341
|
+
const thRef = useRef3(null);
|
|
342
|
+
const { title, cellRenderer, hideActionMenu, dataIndex, width: defaultWidth, resizable = true, pinned } = props;
|
|
343
|
+
const minWidth = title === "" ? 30 : 50;
|
|
344
|
+
const [width, setWidth] = useState4(defaultWidth || 80);
|
|
345
|
+
const startX = useRef3(0);
|
|
346
|
+
const startWidth = useRef3(0);
|
|
347
|
+
const { state: { isAutoSizeAllColumns, ...rest }, api } = useTable();
|
|
348
|
+
useEffect3(() => {
|
|
349
|
+
if (isAutoSizeAllColumns) {
|
|
350
|
+
let element = thRef.current.getBoundingClientRect();
|
|
351
|
+
if (api.onColumnResize) {
|
|
352
|
+
api.onColumnResize(dataIndex, element.width);
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
}, [isAutoSizeAllColumns]);
|
|
356
|
+
const onMouseDown = (e) => {
|
|
357
|
+
startX.current = e.clientX;
|
|
358
|
+
startWidth.current = thRef.current?.offsetWidth || width;
|
|
359
|
+
console.log("Start Width:", startWidth.current);
|
|
360
|
+
document.addEventListener("mousemove", onMouseMove);
|
|
361
|
+
document.addEventListener("mouseup", onMouseUp);
|
|
362
|
+
};
|
|
363
|
+
const onMouseMove = (e) => {
|
|
364
|
+
const newWidth = startWidth.current + (e.clientX - startX.current);
|
|
365
|
+
if (newWidth > minWidth) {
|
|
366
|
+
setWidth(newWidth);
|
|
367
|
+
api.updateState({
|
|
368
|
+
...rest,
|
|
369
|
+
isAutoSizeAllColumns: false
|
|
370
|
+
});
|
|
371
|
+
api.onColumnResize && api.onColumnResize(dataIndex, newWidth);
|
|
372
|
+
}
|
|
373
|
+
};
|
|
374
|
+
const onMouseUp = () => {
|
|
375
|
+
document.removeEventListener("mousemove", onMouseMove);
|
|
376
|
+
document.removeEventListener("mouseup", onMouseUp);
|
|
377
|
+
};
|
|
378
|
+
return /* @__PURE__ */ jsxs4(
|
|
379
|
+
"th",
|
|
380
|
+
{
|
|
381
|
+
className: `${props.headerCellClassName} ${pinned ? pinned + "-pinned" : ""}`,
|
|
382
|
+
ref: thRef,
|
|
383
|
+
style: { width: width || 80 },
|
|
384
|
+
children: [
|
|
385
|
+
/* @__PURE__ */ jsxs4("span", { className: "ms-table-header-cell ", children: [
|
|
386
|
+
/* @__PURE__ */ jsxs4("span", { className: "ms-table-header-cell-title", onClick: () => api.onSortColumn(dataIndex, !props.sortKey ? "asc" : props.sortKey == "asc" ? "desc" : ""), children: [
|
|
387
|
+
title,
|
|
388
|
+
props.sortKey == "asc" ? angleUpIcon : props.sortKey == "desc" ? angleDownIcon : null
|
|
389
|
+
] }),
|
|
390
|
+
!hideActionMenu && /* @__PURE__ */ jsx5("span", { className: "ms-table-header-action", title: "View Menu", onClick: () => api.toggleActionMenu(dataIndex, true, thRef), children: verticleThreeDotsIcon })
|
|
391
|
+
] }),
|
|
392
|
+
resizable && /* @__PURE__ */ jsx5("span", { className: "ms-table-column-resizer", onMouseDown })
|
|
393
|
+
]
|
|
394
|
+
},
|
|
395
|
+
dataIndex
|
|
396
|
+
);
|
|
397
|
+
};
|
|
398
|
+
var HeaderCell_default = HeaderCell;
|
|
399
|
+
|
|
400
|
+
// src/components/Header/msTableHeader.tsx
|
|
401
|
+
import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
402
|
+
var msTableHeader = (props) => {
|
|
403
|
+
const { state, api } = useTable();
|
|
404
|
+
return /* @__PURE__ */ jsxs5(Fragment, { children: [
|
|
405
|
+
/* @__PURE__ */ jsx6("colgroup", { children: state.colConfigs.map((col) => !col.isHidden && /* @__PURE__ */ jsx6("col", { width: col.width || 80 }, col.dataIndex)) }),
|
|
406
|
+
/* @__PURE__ */ jsx6("thead", { ref: props.ref, children: /* @__PURE__ */ jsx6("tr", { children: state.colConfigs.map((col) => {
|
|
407
|
+
if (!col.isHidden) {
|
|
408
|
+
return /* @__PURE__ */ jsx6(HeaderCell_default, { ...col }, col.dataIndex);
|
|
409
|
+
}
|
|
410
|
+
}) }) })
|
|
411
|
+
] });
|
|
412
|
+
};
|
|
413
|
+
var msTableHeader_default = msTableHeader;
|
|
414
|
+
|
|
415
|
+
// src/components/Body/DataRowCell.tsx
|
|
416
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
417
|
+
var DataRowCell = ({ dataIndex, value, cellRenderer, width, pinned }) => {
|
|
418
|
+
return /* @__PURE__ */ jsx7("td", { style: dataIndex !== "name" ? { width: width || "80" } : { width: "80" }, className: `${pinned ? pinned + "-pinned" : ""}`, children: cellRenderer ? cellRenderer(value) : value });
|
|
419
|
+
};
|
|
420
|
+
var DataRowCell_default = DataRowCell;
|
|
421
|
+
|
|
422
|
+
// src/components/Body/msTableBody.tsx
|
|
423
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
424
|
+
var msTableBody = (props) => {
|
|
425
|
+
const { state, api } = useTable();
|
|
426
|
+
return /* @__PURE__ */ jsx8("tbody", { ref: props.ref, children: state.rowData?.map((row, rowIndex) => /* @__PURE__ */ jsx8("tr", { onClick: () => api.onRowSelect(row), children: state.colConfigs?.map((col, colIndex) => !col.isHidden && /* @__PURE__ */ jsx8(DataRowCell_default, { dataIndex: col.dataIndex, value: row[col.dataIndex], width: col.width, cellRenderer: col.cellRenderer, pinned: col.pinned })) }, rowIndex)) });
|
|
427
|
+
};
|
|
428
|
+
var msTableBody_default = msTableBody;
|
|
429
|
+
|
|
430
|
+
// src/components/Footer/msTableFooter.tsx
|
|
431
|
+
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
432
|
+
var MsTableFooter = () => {
|
|
433
|
+
const { state, api } = useTable();
|
|
434
|
+
const { pageSizeOptions, currentPage, pageSize, totalRecords } = state;
|
|
435
|
+
const lastPageNo = Math.ceil(totalRecords / pageSize);
|
|
436
|
+
return /* @__PURE__ */ jsxs6("div", { className: "table-footer", children: [
|
|
437
|
+
/* @__PURE__ */ jsx9("div", { className: "extra-actions" }),
|
|
438
|
+
/* @__PURE__ */ jsxs6("div", { className: "pagination-controls", children: [
|
|
439
|
+
/* @__PURE__ */ jsx9("div", { className: "pagination-info", children: /* @__PURE__ */ jsxs6("div", { className: "page-size", children: [
|
|
440
|
+
/* @__PURE__ */ jsx9("label", { children: "Rows Per Page:" }),
|
|
441
|
+
/* @__PURE__ */ jsx9("select", { onChange: (e) => api.onPageSizeChange(parseInt(e.target.value)), value: pageSize, children: state.pageSizeOptions.map((size) => /* @__PURE__ */ jsx9("option", { value: size, children: size }, size)) })
|
|
442
|
+
] }) }),
|
|
443
|
+
/* @__PURE__ */ jsx9("div", { className: "record-info", children: /* @__PURE__ */ jsx9("label", { children: `${(currentPage - 1) * pageSize + 1} to ${Math.min(currentPage * pageSize, totalRecords)} of ${totalRecords}` }) }),
|
|
444
|
+
/* @__PURE__ */ jsxs6("div", { className: "pagination-buttons", children: [
|
|
445
|
+
/* @__PURE__ */ jsx9("span", { className: `${currentPage == 1 ? "cursor-disabled" : ""}`, title: "Go to First Page", onClick: () => api.onPageChange("first"), children: angleLeftIcon }),
|
|
446
|
+
/* @__PURE__ */ jsx9("span", { className: `${currentPage == 1 ? "cursor-disabled" : ""}`, title: "Previous Page", onClick: () => api.onPageChange("prev"), children: prevIcon }),
|
|
447
|
+
/* @__PURE__ */ jsxs6("span", { className: "current-page", children: [
|
|
448
|
+
currentPage,
|
|
449
|
+
" of ",
|
|
450
|
+
Math.ceil(totalRecords / pageSize)
|
|
451
|
+
] }),
|
|
452
|
+
/* @__PURE__ */ jsx9("span", { className: `${currentPage == lastPageNo ? "cursor-disabled" : ""}`, title: "Next Page", onClick: () => api.onPageChange("next"), children: nextIcon }),
|
|
453
|
+
/* @__PURE__ */ jsx9("span", { className: `${currentPage == lastPageNo ? "cursor-disabled" : ""}`, title: "Go to Last Page", onClick: () => api.onPageChange("last"), children: angleRightIcon })
|
|
454
|
+
] })
|
|
455
|
+
] })
|
|
456
|
+
] });
|
|
457
|
+
};
|
|
458
|
+
var msTableFooter_default = MsTableFooter;
|
|
459
|
+
|
|
460
|
+
// src/MsReactTable.tsx
|
|
461
|
+
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
462
|
+
var MsReactTable = (props) => {
|
|
463
|
+
const { showPagination = true } = props;
|
|
464
|
+
const containerRef = React5.useRef(null);
|
|
465
|
+
const tbodyRef = React5.useRef(null);
|
|
466
|
+
const theadRef = React5.useRef(null);
|
|
467
|
+
return /* @__PURE__ */ jsxs7(TableProvider, { ...props, tbodyRef, theadRef, children: [
|
|
468
|
+
/* @__PURE__ */ jsx10("div", { className: "table-container", ref: containerRef, style: { height: props.height || "200px" }, children: /* @__PURE__ */ jsxs7("table", { ref: props.ref, className: `ms-react-table ${props.className}`, border: 0, cellPadding: 0, cellSpacing: 0, style: { width: "100%", ...props.style }, children: [
|
|
469
|
+
/* @__PURE__ */ jsx10(msTableHeader_default, { ref: theadRef }),
|
|
470
|
+
/* @__PURE__ */ jsx10(msTableBody_default, { ref: tbodyRef })
|
|
471
|
+
] }) }),
|
|
472
|
+
showPagination && /* @__PURE__ */ jsx10(msTableFooter_default, {})
|
|
473
|
+
] });
|
|
474
|
+
};
|
|
475
|
+
MsReactTable.displayName = "MsReactTable";
|
|
476
|
+
var MsReactTable_default = MsReactTable;
|
|
477
|
+
export {
|
|
478
|
+
MsReactTable_default as MsReactTable
|
|
479
|
+
};
|
|
480
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/MsReactTable.tsx","../src/contextAPI/MsTableProvider.tsx","../src/contextAPI/MsTableContext.tsx","../src/components/HeaderActionMenu/HeaderActionMenu.tsx","../src/_assets/icons/index.tsx","../src/components/Overlay.tsx","../src/components/HelperFunction.ts","../src/components/Header/HeaderCell.tsx","../src/components/Header/msTableHeader.tsx","../src/components/Body/DataRowCell.tsx","../src/components/Body/msTableBody.tsx","../src/components/Footer/msTableFooter.tsx"],"sourcesContent":["import React from 'react'\r\nimport { MsTablePropsTypes } from './types/msTableTypes'\r\nimport { TableProvider } from './contextAPI/MsTableProvider'\r\nimport MsTableHeader from './components/Header/msTableHeader'\r\nimport MsTableBody from './components/Body/msTableBody'\r\nimport MsTableFooter from './components/Footer/msTableFooter'\r\nimport './_assets/style.css'\r\n\r\nconst MsReactTable: React.FC<MsTablePropsTypes>=(props) => {\r\n const { showPagination = true } = props\r\n const containerRef = React.useRef<HTMLDivElement>(null!)\r\n const tbodyRef = React.useRef<HTMLTableSectionElement>(null!)\r\n const theadRef = React.useRef<HTMLTableSectionElement>(null!)\r\n return (\r\n <TableProvider {...props} tbodyRef={tbodyRef} theadRef={theadRef}>\r\n <div className='table-container' ref={containerRef} style={{height:props.height || '200px'}}>\r\n <table ref={props.ref} className={`ms-react-table ${props.className}`} border={0} cellPadding={0} cellSpacing={0} style={{ width: '100%', ...props.style }} > \r\n <MsTableHeader ref={theadRef} />\r\n <MsTableBody ref={tbodyRef} />\r\n </table>\r\n </div>\r\n {showPagination && <MsTableFooter />}\r\n </TableProvider>\r\n )\r\n}\r\n\r\nMsReactTable.displayName = 'MsReactTable'\r\n\r\nexport default MsReactTable\r\n","import React, { useState, useMemo, useCallback, useEffect, useRef } from \"react\";\r\nimport MaTableContext from \"./MsTableContext\";\r\nimport type { MsTablePropsTypes } from \"../types/msTableTypes\";\r\nimport { MsTableGlobalStateTypes, pinDirection, sortDirection } from \"../types/contextTypes\";\r\nimport HeaderActionMenu from \"../components/HeaderActionMenu/HeaderActionMenu\";\r\nimport Overlay from \"../components/Overlay\";\r\nimport { sortData } from \"../components/HelperFunction\";\r\ninterface TableProviderProps extends MsTablePropsTypes {\r\n children: React.ReactNode;\r\n tbodyRef?: React.RefObject<HTMLTableSectionElement>\r\n theadRef?: React.RefObject<HTMLTableSectionElement>\r\n}\r\n\r\ntype direction = 'first' | 'last' | 'prev' | 'next';\r\n\r\nexport const TableProvider: React.FC<TableProviderProps> = (props) => {\r\n const actionMenuRef = useRef<HTMLDivElement>(null!);\r\n const { \r\n columns, \r\n data, \r\n children, \r\n pageSizeOptions = [], \r\n isClientSideRendering = true, \r\n totalRecords, \r\n tbodyRef, \r\n theadRef,\r\n onRowClick\r\n } = props;\r\n const tbodyHeight = tbodyRef?.current?.clientHeight\r\n const theadHeight = theadRef?.current?.clientHeight\r\n const [showActionMenu, setActionMenu] = useState<boolean>(false)\r\n const [selectedHeaderCell, setHeaderCell] = useState<string>(\"\")\r\n // Position of action menu\r\n const [menuPosition, setMenuPosition] = useState({\r\n top: 0,\r\n right: 0,\r\n left: 0\r\n })\r\n // Global Variable of Table\r\n const [state, setState] = useState<MsTableGlobalStateTypes>({\r\n prevColConfig: columns,\r\n colConfigs: columns,\r\n rowData: [],\r\n allRowData: data,\r\n currentPage: 1,\r\n pageSize: pageSizeOptions.length > 0 ? pageSizeOptions[0] : 50,\r\n totalRecords: isClientSideRendering ? data.length : props?.totalRecords || 0,\r\n selectedRows: [],\r\n pageSizeOptions: pageSizeOptions.length > 0 ? pageSizeOptions : [50, 100, 200, 500],\r\n isAutoSizeAllColumns: false\r\n });\r\n\r\n useEffect(() => {\r\n if (isClientSideRendering) {\r\n const { currentPage, pageSize } = state;\r\n let list = data.slice(currentPage - 1, pageSize * currentPage - 1)\r\n setState((prevState) => ({\r\n ...prevState,\r\n rowData: list\r\n }));\r\n }\r\n }, [])\r\n\r\n const onRowSelect = useCallback((rowData: any) => {\r\n setState((prevState) => ({\r\n ...prevState,\r\n selectedRows: [...prevState.selectedRows, rowData],\r\n }));\r\n onRowClick ? onRowClick(rowData) : null\r\n }, []);\r\n\r\n const onColumnResize = useCallback((dataIndex: string, newWidth: number) => {\r\n setState((prevState) => ({\r\n ...prevState,\r\n colConfigs: prevState.colConfigs.map((col) =>\r\n col.dataIndex === dataIndex ? { ...col, width: newWidth } : col\r\n ),\r\n isAutoSizeAllColumns:false\r\n }));\r\n }, []);\r\n\r\n const onPageChange = (direction: direction) => {\r\n const { pageSize, totalRecords, allRowData, currentPage } = state;\r\n var goToPageNo = 0;\r\n if (direction == 'first') {\r\n goToPageNo = 1;\r\n }\r\n else if (direction == 'last') {\r\n goToPageNo = Math.ceil(totalRecords / pageSize)\r\n }\r\n else if (direction == 'next') {\r\n goToPageNo = currentPage + 1;\r\n }\r\n else if (direction == 'prev') {\r\n goToPageNo = currentPage - 1;\r\n }\r\n\r\n let list = data.slice(goToPageNo - 1, pageSize * goToPageNo - 1)\r\n setState((prevState) => ({\r\n ...prevState,\r\n currentPage: goToPageNo,\r\n rowData: list\r\n }));\r\n }\r\n\r\n const onPageSizeChange = (pageSize: number) => {\r\n const { allRowData } = state;\r\n let list = allRowData.slice(0, pageSize - 1)\r\n setState((prevState) => ({\r\n ...prevState,\r\n currentPage: 1,\r\n pageSize: pageSize,\r\n rowData: list\r\n }))\r\n }\r\n\r\n const toggleActionMenu = (dataIndex: string, showMenu: boolean, ref: React.RefObject<HTMLTableCellElement>) => {\r\n const position = ref.current.getBoundingClientRect()\r\n let left = position.x + position.width\r\n setMenuPosition({\r\n top: position.height,\r\n right: 0,\r\n left: left > 200 ? left - 200 : position.x\r\n })\r\n setActionMenu(true)\r\n setHeaderCell(dataIndex)\r\n }\r\n\r\n // Sorting Function\r\n const onSortColumn = (dataIndex: string, sortBy: sortDirection) => {\r\n let columns = state.colConfigs.map(item => {\r\n return {\r\n ...item,\r\n sortKey: dataIndex == item.dataIndex ? sortBy : ''\r\n }\r\n })\r\n if (sortBy == \"\") {\r\n setState((prevState) => ({\r\n ...prevState,\r\n colConfigs: columns,\r\n rowData: data\r\n }));\r\n return;\r\n }\r\n let sortedList = sortData(data, dataIndex, sortBy)\r\n\r\n setState((prevState) => ({\r\n ...prevState,\r\n colConfigs: columns,\r\n rowData: sortedList\r\n }));\r\n setActionMenu(false)\r\n setHeaderCell(\"\")\r\n }\r\n\r\n // Pin column Function\r\n const onColumnPin = (pinDirection: pinDirection) => {\r\n const { colConfigs } = state;\r\n let newConfig = colConfigs.map((item) => {\r\n if (item.dataIndex === selectedHeaderCell) {\r\n item.pinned = pinDirection\r\n }\r\n return item;\r\n })\r\n setState((prevState) => ({\r\n ...prevState,\r\n colConfigs: newConfig\r\n }));\r\n }\r\n\r\n // Resize Columns\r\n const onAutoColumnResize = (dataIndex: string) => {\r\n if (dataIndex == 'all') {\r\n setState((prevState) => ({\r\n ...prevState,\r\n isAutoSizeAllColumns: true\r\n }))\r\n setActionMenu(false)\r\n }\r\n else{\r\n // setActionMenu(false)\r\n // setState((prevState) => ({\r\n // ...prevState,\r\n // isAutoSizeAllColumns: true\r\n // }))\r\n // //\r\n }\r\n }\r\n\r\n const onColumnReset = () => {\r\n setState({\r\n prevColConfig: columns,\r\n colConfigs: columns,\r\n rowData: data,\r\n allRowData: data,\r\n currentPage: 1,\r\n pageSize: pageSizeOptions.length > 0 ? pageSizeOptions[0] : 50,\r\n totalRecords: isClientSideRendering ? data.length : props?.totalRecords || 0,\r\n selectedRows: [],\r\n pageSizeOptions: pageSizeOptions.length > 0 ? pageSizeOptions : [50, 100, 200, 500],\r\n isAutoSizeAllColumns: false\r\n })\r\n setActionMenu(false)\r\n }\r\n\r\n // Update Global state from child\r\n const updateState = useCallback((newState: MsTableGlobalStateTypes) => {\r\n setState((prev)=>({\r\n ...prev,\r\n ...newState\r\n }))\r\n }, [])\r\n\r\n // All Table Action will register in api \r\n const api = useMemo(\r\n () => ({\r\n onRowSelect,\r\n onColumnResize,\r\n onAutoColumnResize,\r\n onPageChange,\r\n onPageSizeChange,\r\n toggleActionMenu,\r\n onColumnPin,\r\n onSortColumn,\r\n updateState,\r\n onColumnReset\r\n }),\r\n [onRowSelect, onColumnResize, onAutoColumnResize, onPageChange, onPageSizeChange, toggleActionMenu, onColumnPin, onSortColumn, updateState, onColumnReset]\r\n );\r\n\r\n const contextValue = useMemo(\r\n () => ({ state, api }),\r\n [state, api]\r\n );\r\n\r\n // Hide Action Menu when outside gets clicked\r\n useEffect(() => {\r\n function handleClickOutside(event: MouseEvent) {\r\n if (\r\n actionMenuRef && 'current' in actionMenuRef &&\r\n actionMenuRef.current &&\r\n !actionMenuRef.current.contains(event.target as Node)\r\n ) {\r\n setActionMenu(false)\r\n }\r\n }\r\n\r\n document.addEventListener(\"mousedown\", handleClickOutside);\r\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\r\n }, [actionMenuRef, setActionMenu]);\r\n\r\n return (\r\n <MaTableContext.Provider value={contextValue}>\r\n <div className={`table-wrapper ${state.isAutoSizeAllColumns ? 'ms-auto-width' : ''}`}>\r\n {children}\r\n {/* default No data Message */}\r\n {\r\n state.rowData.length == 0 &&\r\n <Overlay style={{ height: tbodyHeight, top: theadHeight }} />\r\n }\r\n {\r\n showActionMenu && <HeaderActionMenu ref={actionMenuRef} dataIndex={selectedHeaderCell} style={{ top: menuPosition.top, left: menuPosition.left }} />\r\n }\r\n </div>\r\n </MaTableContext.Provider>\r\n );\r\n};","import React, { createContext, useContext, useState, useMemo } from \"react\";\r\nimport type { MsTableGlobalStateTypes, MsReactTableAPI } from \"../types/contextTypes\";\r\n\r\nconst TableContext = createContext<{ state: MsTableGlobalStateTypes; api: MsReactTableAPI } | null>(\r\n null\r\n);\r\n\r\nexport default TableContext;\r\n\r\nexport const useTable = () => {\r\n const ctx = useContext(TableContext);\r\n if (!ctx) throw new Error(\"useTable must be used inside TableProvider\");\r\n return ctx;\r\n};\r\n","import React, { ChangeEvent, useEffect, useRef, useState } from 'react'\r\nimport { angleDownIcon, angleUpIcon, pinIcon, checkIcon, doubleArrow, doublePipeArrow, hideShow, reloadIcon } from \"../../_assets/icons/index\"\r\nimport { useTable } from '../../contextAPI/MsTableContext'\r\nimport { MsTableGlobalStateTypes } from '../../types/contextTypes'\r\nimport { MsTableHeaderCellTypes } from '../../types/msTableTypes'\r\ninterface ActionMenuProps {\r\n ref: React.RefObject<HTMLDivElement>\r\n style?: React.CSSProperties\r\n dataIndex: string\r\n}\r\n\r\nconst HeaderActionMenu: React.FC<ActionMenuProps> = (props) => {\r\n const { state, api: { onColumnPin, onSortColumn, onAutoColumnResize, onColumnReset, updateState } } = useTable();\r\n const [showColumnList, toggleColumnList] = useState(false)\r\n\r\n const [columnList, setColumnList] = useState<MsTableHeaderCellTypes[]>(state.colConfigs)\r\n const [searchkey, setSearchkey] = useState(\"\")\r\n useEffect(() => {\r\n setColumnList(state.colConfigs)\r\n onSearchHeader(searchkey)\r\n }, [state.colConfigs])\r\n // Hide & Show Column start\r\n const onCheckboxChange = (dataIndex: string, e: ChangeEvent<HTMLInputElement>) => {\r\n let newConfig = state.colConfigs.map(item => {\r\n return {\r\n ...item,\r\n isHidden: item.dataIndex == dataIndex ? !e.target.checked : (item.isHidden || false)\r\n }\r\n })\r\n updateState({\r\n ...state,\r\n colConfigs: newConfig\r\n })\r\n setColumnList(newConfig)\r\n }\r\n // Hide & show column end\r\n\r\n const onSearchHeader = (value: string) => {\r\n let newlist: MsTableHeaderCellTypes[] = []\r\n if (value) {\r\n state.colConfigs.map(item => {\r\n if (item.title.toLowerCase().includes(value.toLowerCase())) {\r\n newlist.push(item)\r\n }\r\n })\r\n setColumnList(newlist)\r\n }\r\n else {\r\n setColumnList(state.colConfigs)\r\n }\r\n setSearchkey(value)\r\n }\r\n\r\n\r\n return (\r\n <div ref={props.ref} className='header-menu' style={props.style}>\r\n {\r\n showColumnList ?\r\n <div className='column-list'>\r\n <div className='search'>\r\n <input type='text' placeholder='Search header' className='search-input' onChange={e => onSearchHeader(e.target.value)} />\r\n </div>\r\n <div className='list'>\r\n {\r\n columnList.map(item => (\r\n <div className='item' key={item.dataIndex + \"_item\"}>\r\n <input className=\"ms-checkbox-input\" type=\"checkbox\" id={item.dataIndex} checked={!item.isHidden} onChange={e => onCheckboxChange(item.dataIndex, e)} />\r\n <label htmlFor={item.dataIndex}>{item.title}</label>\r\n </div>\r\n ))\r\n }\r\n </div>\r\n </div>\r\n :\r\n <ul>\r\n <li onClick={() => onSortColumn(props.dataIndex, 'asc')}>\r\n <span>{angleUpIcon}</span>\r\n {`Sort By Ascending`}\r\n </li>\r\n <li onClick={() => onSortColumn(props.dataIndex, 'desc')}>\r\n <span>{angleDownIcon}</span>\r\n {`Sort By Descending`}\r\n </li>\r\n {/* <li>\r\n <span>{pinIcon}</span>\r\n {`Pin Column`}\r\n <ul className=''>\r\n <li onClick={()=>onColumnPin(\"\")}><span>{checkIcon}</span> No Pin</li>\r\n <li onClick={()=>onColumnPin(\"left\")}><span></span> Pin Left</li>\r\n <li onClick={()=>onColumnPin(\"right\")}><span></span> Pin Right</li>\r\n </ul>\r\n </li> \r\n <li onClick={() => onAutoColumnResize(props.dataIndex)}>\r\n <span>{doubleArrow}</span>\r\n {`Autosize This Column`}\r\n </li> */}\r\n <li onClick={() => onAutoColumnResize('all')}>\r\n <span>{doublePipeArrow}</span>\r\n {`Autosize All Column`}\r\n </li>\r\n <li onClick={() => toggleColumnList(true)}>\r\n <span>{hideShow}</span>\r\n {`Hide/Show Columns`}\r\n </li>\r\n <li onClick={onColumnReset}>\r\n <span>{reloadIcon}</span>\r\n {`Reset Columns`}\r\n </li>\r\n </ul>\r\n }\r\n </div>\r\n )\r\n}\r\n\r\nexport default HeaderActionMenu\r\n","const verticleThreeDotsIcon = (\r\n <svg width=\"3\" height=\"13\" viewBox=\"0 0 3 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<ellipse cx=\"1.5\" cy=\"1.5\" rx=\"1.5\" ry=\"1.5\" transform=\"matrix(-4.37114e-08 1 1 4.37114e-08 0 10)\" fill=\"#2F2F2F\"/>\r\n<ellipse cx=\"1.5\" cy=\"1.5\" rx=\"1.5\" ry=\"1.5\" transform=\"matrix(-4.37114e-08 1 1 4.37114e-08 0 5)\" fill=\"#2F2F2F\"/>\r\n<ellipse cx=\"1.5\" cy=\"1.5\" rx=\"1.5\" ry=\"1.5\" transform=\"matrix(-4.37114e-08 1 1 4.37114e-08 0 0)\" fill=\"#2F2F2F\"/>\r\n</svg>\r\n\r\n)\r\n\r\nconst angleRightIcon = (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\"><path d=\"M141.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L124.69,128,50.34,53.66A8,8,0,0,1,61.66,42.34l80,80A8,8,0,0,1,141.66,133.66Zm80-11.32-80-80a8,8,0,0,0-11.32,11.32L204.69,128l-74.35,74.34a8,8,0,0,0,11.32,11.32l80-80A8,8,0,0,0,221.66,122.34Z\"></path></svg>\r\n)\r\n\r\nconst angleLeftIcon = (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\"><path d=\"M205.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L131.31,128ZM51.31,128l74.35-74.34a8,8,0,0,0-11.32-11.32l-80,80a8,8,0,0,0,0,11.32l80,80a8,8,0,0,0,11.32-11.32Z\"></path></svg>\r\n)\r\n\r\nconst angleDownIcon = (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\"><path d=\"M213.66,130.34a8,8,0,0,1,0,11.32l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,204.69l74.34-74.35A8,8,0,0,1,213.66,130.34Zm-91.32,11.32a8,8,0,0,0,11.32,0l80-80a8,8,0,0,0-11.32-11.32L128,124.69,53.66,50.34A8,8,0,0,0,42.34,61.66Z\"></path></svg>\r\n)\r\n\r\nconst angleUpIcon = (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\"><path d=\"M213.66,194.34a8,8,0,0,1-11.32,11.32L128,131.31,53.66,205.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0Zm-160-68.68L128,51.31l74.34,74.35a8,8,0,0,0,11.32-11.32l-80-80a8,8,0,0,0-11.32,0l-80,80a8,8,0,0,0,11.32,11.32Z\"></path></svg>\r\n)\r\n\r\nconst pinIcon = (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\"><path d=\"M216,168h-9.29L185.54,48H192a8,8,0,0,0,0-16H64a8,8,0,0,0,0,16h6.46L49.29,168H40a8,8,0,0,0,0,16h80v56a8,8,0,0,0,16,0V184h80a8,8,0,0,0,0-16ZM86.71,48h82.58l21.17,120H65.54Z\"></path></svg>\r\n)\r\n\r\nconst reloadIcon = (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 256 256\"><path fill=\"currentColor\" d=\"M224 128a96 96 0 0 1-94.71 96H128a95.38 95.38 0 0 1-65.9-26.2a8 8 0 0 1 11-11.63a80 80 0 1 0-1.67-114.78a3 3 0 0 1-.26.25L44.59 96H72a8 8 0 0 1 0 16H24a8 8 0 0 1-8-8V56a8 8 0 0 1 16 0v29.8L60.25 60A96 96 0 0 1 224 128\"></path></svg>\r\n)\r\n\r\nconst prevIcon = (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\"><path d=\"M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z\"></path></svg>\r\n)\r\n\r\nconst nextIcon = (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\"><path d=\"M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z\"></path></svg>\r\n)\r\n\r\nconst checkIcon = (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\"><path d=\"M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z\"></path></svg>\r\n)\r\n\r\nconst doubleArrow = (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\"><path d=\"M237.66,133.66l-32,32a8,8,0,0,1-11.32-11.32L212.69,136H43.31l18.35,18.34a8,8,0,0,1-11.32,11.32l-32-32a8,8,0,0,1,0-11.32l32-32a8,8,0,0,1,11.32,11.32L43.31,120H212.69l-18.35-18.34a8,8,0,0,1,11.32-11.32l32,32A8,8,0,0,1,237.66,133.66Z\"></path></svg>\r\n)\r\n\r\nconst doublePipeArrow = (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\"><path d=\"M112,48V208a8,8,0,0,1-16,0V136H43.31l18.35,18.34a8,8,0,0,1-11.32,11.32l-32-32a8,8,0,0,1,0-11.32l32-32a8,8,0,0,1,11.32,11.32L43.31,120H96V48a8,8,0,0,1,16,0Zm125.66,74.34-32-32a8,8,0,0,0-11.32,11.32L212.69,120H160V48a8,8,0,0,0-16,0V208a8,8,0,0,0,16,0V136h52.69l-18.35,18.34a8,8,0,0,0,11.32,11.32l32-32A8,8,0,0,0,237.66,122.34Z\"></path></svg>\r\n)\r\n\r\nconst hideShow = (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\"><path d=\"M64,105V40a8,8,0,0,0-16,0v65a32,32,0,0,0,0,62v49a8,8,0,0,0,16,0V167a32,32,0,0,0,0-62Zm-8,47a16,16,0,1,1,16-16A16,16,0,0,1,56,152Zm80-95V40a8,8,0,0,0-16,0V57a32,32,0,0,0,0,62v97a8,8,0,0,0,16,0V119a32,32,0,0,0,0-62Zm-8,47a16,16,0,1,1,16-16A16,16,0,0,1,128,104Zm104,64a32.06,32.06,0,0,0-24-31V40a8,8,0,0,0-16,0v97a32,32,0,0,0,0,62v17a8,8,0,0,0,16,0V199A32.06,32.06,0,0,0,232,168Zm-32,16a16,16,0,1,1,16-16A16,16,0,0,1,200,184Z\"></path></svg>\r\n)\r\nexport {\r\n verticleThreeDotsIcon,\r\n angleRightIcon,\r\n angleLeftIcon,\r\n angleDownIcon,\r\n angleUpIcon,\r\n pinIcon,\r\n reloadIcon,\r\n prevIcon,\r\n nextIcon,\r\n checkIcon,\r\n doubleArrow,\r\n hideShow,\r\n doublePipeArrow\r\n}\r\n\r\n","import React from 'react'\r\ninterface OverlayProps {\r\n message?: string\r\n style: React.CSSProperties\r\n}\r\nconst Overlay:React.FC<OverlayProps> = (props) => {\r\n const {message=\"No Records to show\", style} = props\r\n\r\n return (\r\n <div className='overlay-message' style={style}>\r\n {message}\r\n </div>\r\n )\r\n}\r\n\r\nexport default Overlay\r\n","import { sortDirection } from \"../types/contextTypes\";\r\nimport { MsTableHeaderCellTypes } from \"../types/msTableTypes\";\r\n\r\nexport function sortData<T extends Record<string, any>>(\r\n data: T[],\r\n dataIndex: keyof T,\r\n sortBy: sortDirection\r\n): T[] {\r\n return [...data].sort((a, b) => {\r\n const valA = a[dataIndex];\r\n const valB = b[dataIndex];\r\n\r\n // Handle numbers\r\n if (typeof valA === \"number\" && typeof valB === \"number\") {\r\n return sortBy === \"asc\" ? valA - valB : valB - valA;\r\n }\r\n\r\n // Handle strings\r\n const strA = String(valA).toLowerCase();\r\n const strB = String(valB).toLowerCase();\r\n\r\n if (strA === strB) return 0;\r\n\r\n const comparison = strA < strB ? -1 : 1;\r\n return sortBy === \"asc\" ? comparison : -comparison;\r\n });\r\n}\r\n\r\n\r\nfunction isNumeric(value:any) {\r\n return !isNaN(parseFloat(value)) && isFinite(value);\r\n}","import React, { useEffect, useRef, useState } from 'react'\r\nimport { MsTableHeaderCellTypes } from '../../types/msTableTypes'\r\nimport { angleDownIcon, angleUpIcon, verticleThreeDotsIcon } from '../../_assets/icons';\r\nimport { useTable } from '../../contextAPI/MsTableContext';\r\n\r\nconst HeaderCell: React.FC<MsTableHeaderCellTypes> = (props) => {\r\n const thRef = useRef<HTMLTableCellElement>(null!);\r\n const { title, cellRenderer, hideActionMenu, dataIndex, width: defaultWidth, resizable = true, pinned } = props\r\n const minWidth = title === \"\" ? 30 : 50;\r\n const [width, setWidth] = useState<number>(defaultWidth || 80);\r\n const startX = useRef<any>(0);\r\n const startWidth = useRef<any>(0);\r\n // Get table state and api from context\r\n const { state:{isAutoSizeAllColumns, ...rest}, api } = useTable()\r\n\r\n useEffect(()=>{\r\n if(isAutoSizeAllColumns){\r\n let element = thRef.current.getBoundingClientRect()\r\n if(api.onColumnResize){\r\n api.onColumnResize(dataIndex, element.width)\r\n }\r\n \r\n }\r\n },[isAutoSizeAllColumns])\r\n\r\n const onMouseDown = (e: React.MouseEvent<HTMLSpanElement>) => {\r\n startX.current = e.clientX;\r\n startWidth.current = thRef.current?.offsetWidth || width;\r\n console.log('Start Width:', startWidth.current);\r\n document.addEventListener(\"mousemove\", onMouseMove);\r\n document.addEventListener(\"mouseup\", onMouseUp);\r\n };\r\n\r\n const onMouseMove = (e: MouseEvent) => {\r\n const newWidth = startWidth.current + (e.clientX - startX.current);\r\n if (newWidth > minWidth) {\r\n setWidth(newWidth);\r\n api.updateState({\r\n ...rest,\r\n isAutoSizeAllColumns: false\r\n })\r\n api.onColumnResize && api.onColumnResize(dataIndex, newWidth);\r\n }\r\n };\r\n\r\n const onMouseUp = () => {\r\n document.removeEventListener(\"mousemove\", onMouseMove);\r\n document.removeEventListener(\"mouseup\", onMouseUp);\r\n };\r\n\r\n return (\r\n <th\r\n key={dataIndex}\r\n className={`${props.headerCellClassName} ${pinned ? pinned + '-pinned' : ''}`}\r\n ref={thRef}\r\n style={{ width: width || 80 }}\r\n\r\n >\r\n <span className='ms-table-header-cell '>\r\n <span className='ms-table-header-cell-title' onClick={() => api.onSortColumn(dataIndex, !props.sortKey ? 'asc' : props.sortKey == 'asc' ? 'desc' : '')}>\r\n {title}\r\n {\r\n props.sortKey == 'asc' ? angleUpIcon : props.sortKey == 'desc' ? angleDownIcon : null\r\n }\r\n </span>\r\n {\r\n !hideActionMenu && (\r\n <span className='ms-table-header-action' title='View Menu' onClick={() => api.toggleActionMenu(dataIndex, true, thRef)}>{verticleThreeDotsIcon}</span>\r\n )\r\n }\r\n </span>\r\n\r\n {\r\n resizable && (\r\n <span className=\"ms-table-column-resizer\" onMouseDown={onMouseDown} ></span>\r\n )\r\n }\r\n </th>\r\n )\r\n}\r\n\r\nexport default HeaderCell\r\n","import React from 'react'\r\nimport { useTable } from '../../contextAPI/MsTableContext'\r\nimport HeaderCell from './HeaderCell'\r\ninterface THeaderProps {\r\n ref?: React.RefObject<HTMLTableSectionElement>\r\n}\r\nconst msTableHeader: React.FC<THeaderProps> = (props) => {\r\n const { state, api } = useTable()\r\n return (\r\n <>\r\n <colgroup>\r\n {\r\n state.colConfigs.map((col) => (\r\n\r\n !col.isHidden && <col key={col.dataIndex} width={col.width || 80} />\r\n ))\r\n }\r\n\r\n </colgroup>\r\n <thead ref={props.ref}>\r\n <tr>\r\n {\r\n state.colConfigs.map((col) => {\r\n if(!col.isHidden){\r\n return <HeaderCell key={col.dataIndex} {...col} />\r\n }\r\n })\r\n }\r\n </tr>\r\n </thead>\r\n </>\r\n )\r\n}\r\n\r\nexport default msTableHeader\r\n","import React, { JSX } from 'react'\r\ninterface DataRowCellProps {\r\n dataIndex: string\r\n value: any\r\n width?: number\r\n cellRenderer?: (data: any) => JSX.Element\r\n pinned?: 'left'|'right'|''\r\n}\r\n\r\nconst DataRowCell:React.FC<DataRowCellProps> = ({ dataIndex, value, cellRenderer, width, pinned }) => {\r\n return (\r\n <td style={dataIndex!=='name' ? {width: width || '80'}:{width:'80'}} className={`${pinned? pinned+'-pinned':''}`}>\r\n {/* Cell Content */}\r\n {cellRenderer ? cellRenderer(value) : value}\r\n </td>\r\n )\r\n}\r\n\r\nexport default DataRowCell\r\n","import React from 'react'\r\nimport { useTable } from '../../contextAPI/MsTableContext'\r\nimport DataRowCell from './DataRowCell'\r\ninterface TBodyProps {\r\n ref?: React.RefObject<HTMLTableSectionElement>\r\n}\r\nconst msTableBody: React.FC<TBodyProps> = (props) => {\r\n const { state, api } = useTable() // TODO: Add context here\r\n // console.log(props.ref?.current?.clientWidth)\r\n return (\r\n <tbody ref={props.ref}>\r\n {\r\n state.rowData?.map((row, rowIndex) => (\r\n <tr key={rowIndex} onClick={()=>api.onRowSelect(row)}>\r\n {\r\n state.colConfigs?.map((col, colIndex) => (\r\n !col.isHidden && <DataRowCell dataIndex={col.dataIndex} value={row[col.dataIndex]} width={col.width} cellRenderer={col.cellRenderer} pinned={col.pinned} />\r\n ))\r\n }\r\n </tr>\r\n ))\r\n }\r\n </tbody>\r\n )\r\n}\r\n\r\nexport default msTableBody\r\n","import React from 'react'\r\nimport { useTable } from '../../contextAPI/MsTableContext';\r\nimport { angleLeftIcon, prevIcon, nextIcon, angleRightIcon } from '../../_assets/icons';\r\n\r\nconst MsTableFooter:React.FC = () => {\r\n const { state, api } = useTable();\r\n const { pageSizeOptions, currentPage, pageSize, totalRecords } = state\r\n\r\n const lastPageNo = Math.ceil(totalRecords/pageSize)\r\n\r\n return (\r\n <div className='table-footer'>\r\n <div className='extra-actions'>\r\n {/* Extra Actions can be added here */}\r\n </div>\r\n <div className='pagination-controls'>\r\n {/* Pagination Controls can be added here */}\r\n <div className='pagination-info'>\r\n <div className='page-size'>\r\n <label>Rows Per Page:</label>\r\n <select onChange={(e)=>api.onPageSizeChange(parseInt(e.target.value))} value={pageSize}>\r\n {\r\n state.pageSizeOptions.map((size) => (\r\n <option key={size} value={size}>{size}</option>\r\n ))\r\n }\r\n </select>\r\n </div>\r\n </div>\r\n <div className='record-info'>\r\n <label>{`${(currentPage - 1)*pageSize + 1} to ${Math.min(currentPage * pageSize, totalRecords)} of ${totalRecords}`}</label>\r\n </div>\r\n <div className='pagination-buttons'>\r\n <span className={`${currentPage==1 ? 'cursor-disabled' : ''}`} title='Go to First Page' onClick={()=>api.onPageChange('first')}>{angleLeftIcon}</span>\r\n <span className={`${currentPage==1 ? 'cursor-disabled' : ''}`} title='Previous Page' onClick={()=>api.onPageChange('prev')}>{prevIcon}</span>\r\n <span className='current-page'>{currentPage} of {Math.ceil(totalRecords / pageSize)}</span>\r\n <span className={`${currentPage==lastPageNo ? 'cursor-disabled' : ''}`} title='Next Page' onClick={()=>api.onPageChange('next')}>{nextIcon}</span>\r\n <span className={`${currentPage==lastPageNo ? 'cursor-disabled' : ''}`} title='Go to Last Page' onClick={()=>api.onPageChange('last')}>{angleRightIcon}</span>\r\n </div>\r\n </div>\r\n </div>\r\n )\r\n}\r\n``\r\nexport default MsTableFooter\r\n"],"mappings":"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","names":["React","useState","useMemo","useEffect","useRef","useState","jsx","jsxs","useState","jsx","jsx","jsxs","useRef","useState","useEffect","totalRecords","columns","useMemo","useEffect","useRef","useState","jsx","jsxs","useRef","useState","useEffect","jsx","jsxs","jsx","jsx","jsx","jsxs","jsx","jsxs","React"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "ms-react-table",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"main": "dist/index.js",
|
|
5
|
+
"module": "dist/index.mjs",
|
|
6
|
+
"types": "dist/index.d.ts",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
|
+
"scripts": {
|
|
11
|
+
"build": "tsup",
|
|
12
|
+
"storybook": "storybook dev -p 6006",
|
|
13
|
+
"build-storybook": "storybook build"
|
|
14
|
+
},
|
|
15
|
+
"keywords": [],
|
|
16
|
+
"author": "",
|
|
17
|
+
"license": "ISC",
|
|
18
|
+
"description": "",
|
|
19
|
+
"dependencies": {
|
|
20
|
+
"react": "^19.2.3",
|
|
21
|
+
"react-dom": "^19.2.3"
|
|
22
|
+
},
|
|
23
|
+
"devDependencies": {
|
|
24
|
+
"@types/react": "^19.2.7",
|
|
25
|
+
"@types/react-dom": "^19.2.3",
|
|
26
|
+
"@vitejs/plugin-react": "^5.1.2",
|
|
27
|
+
"rollup-plugin-dts": "^6.3.0",
|
|
28
|
+
"tsup": "^8.5.1",
|
|
29
|
+
"typescript": "^5.9.3",
|
|
30
|
+
"vite": "^7.3.0",
|
|
31
|
+
"storybook": "^10.1.10",
|
|
32
|
+
"@storybook/react-vite": "^10.1.10",
|
|
33
|
+
"@chromatic-com/storybook": "^4.1.3",
|
|
34
|
+
"@storybook/addon-vitest": "^10.1.10",
|
|
35
|
+
"@storybook/addon-a11y": "^10.1.10",
|
|
36
|
+
"@storybook/addon-docs": "^10.1.10",
|
|
37
|
+
"@storybook/addon-onboarding": "^10.1.10",
|
|
38
|
+
"vitest": "^4.0.16",
|
|
39
|
+
"playwright": "^1.57.0",
|
|
40
|
+
"@vitest/browser-playwright": "^4.0.16",
|
|
41
|
+
"@vitest/coverage-v8": "^4.0.16"
|
|
42
|
+
}
|
|
43
|
+
}
|