@prt-ts/fluent-react-table-v2 9.66.2-build-2.0 → 9.66.2-build-3.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/index.cjs.js
CHANGED
|
@@ -132,7 +132,7 @@ const DEFAULT_NUMBER_OF_PAGE_BTN = 5;
|
|
|
132
132
|
const Pagination = (props) => {
|
|
133
133
|
const { table } = props;
|
|
134
134
|
const { pageSizeOptions } = table.options.meta || {};
|
|
135
|
-
const pageSizeSelectionId = reactComponents.useId(
|
|
135
|
+
const pageSizeSelectionId = reactComponents.useId('page-size-selector');
|
|
136
136
|
const styles = usePaginationStyle();
|
|
137
137
|
const totalNumberOfPage = table.getPageCount();
|
|
138
138
|
const currentPage = table.getState().pagination.pageIndex;
|
|
@@ -140,14 +140,17 @@ const Pagination = (props) => {
|
|
|
140
140
|
// get total item count and number of item in current page
|
|
141
141
|
const totalItemCount = table.getFilteredRowModel().rows.length;
|
|
142
142
|
const numberOfItemsInCurrentPage = table.getRowModel().rows.length;
|
|
143
|
+
const startNumber = currentPage * pageSize + 1;
|
|
144
|
+
const endNumber = Math.min(startNumber + numberOfItemsInCurrentPage - 1, totalItemCount);
|
|
143
145
|
const pageSelectionOptions = React.useMemo(() => {
|
|
144
146
|
let start = currentPage - Math.floor(DEFAULT_NUMBER_OF_PAGE_BTN / 2);
|
|
145
147
|
let end = currentPage + Math.floor(DEFAULT_NUMBER_OF_PAGE_BTN / 2);
|
|
146
148
|
if (start < 1) {
|
|
147
149
|
start = 1;
|
|
148
|
-
end =
|
|
149
|
-
|
|
150
|
-
|
|
150
|
+
end =
|
|
151
|
+
totalNumberOfPage > DEFAULT_NUMBER_OF_PAGE_BTN
|
|
152
|
+
? DEFAULT_NUMBER_OF_PAGE_BTN
|
|
153
|
+
: totalNumberOfPage;
|
|
151
154
|
}
|
|
152
155
|
else if (end > totalNumberOfPage) {
|
|
153
156
|
const possibleStart = totalNumberOfPage - DEFAULT_NUMBER_OF_PAGE_BTN + 1;
|
|
@@ -157,12 +160,12 @@ const Pagination = (props) => {
|
|
|
157
160
|
const currentPageOptions = end - start >= 0 ? range(start, end) : [];
|
|
158
161
|
return (currentPageOptions === null || currentPageOptions === void 0 ? void 0 : currentPageOptions.length) ? [...currentPageOptions] : [1];
|
|
159
162
|
}, [totalNumberOfPage, currentPage]);
|
|
160
|
-
return (jsxRuntime.jsx("div", { className: styles.paginationContainer, children: jsxRuntime.jsxs("div", { className: styles.wrapper, children: [jsxRuntime.jsxs("div", { className: styles.pageSelectionWrapper, children: [jsxRuntime.jsx(reactComponents.Dropdown, { id: pageSizeSelectionId, size: "small", selectedOptions: [`${pageSize}`], placeholder: "Select Page Size", value: table.getState().pagination.pageSize.toString(), onOptionSelect: (_, data) => { var _a; return table.setPageSize(Number(+((_a = data.selectedOptions) === null || _a === void 0 ? void 0 : _a[0]))); }, className: styles.pageSelectionDropdown, "aria-label":
|
|
163
|
+
return (jsxRuntime.jsx("div", { className: styles.paginationContainer, children: jsxRuntime.jsxs("div", { className: styles.wrapper, children: [jsxRuntime.jsxs("div", { className: styles.pageSelectionWrapper, children: [jsxRuntime.jsx(reactComponents.Dropdown, { id: pageSizeSelectionId, size: "small", selectedOptions: [`${pageSize}`], placeholder: "Select Page Size", value: table.getState().pagination.pageSize.toString(), onOptionSelect: (_, data) => { var _a; return table.setPageSize(Number(+((_a = data.selectedOptions) === null || _a === void 0 ? void 0 : _a[0]))); }, className: styles.pageSelectionDropdown, "aria-label": 'Select Page Size', style: { minWidth: 80 }, children: jsxRuntime.jsx(reactControlFlow.Show, { when: (pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.length) > 0, children: jsxRuntime.jsx(reactControlFlow.For, { each: pageSizeOptions, children: (option) => (jsxRuntime.jsx(reactComponents.Option, { value: `${option}`, children: `${option}` }, option)) }) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: (pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.length) > 0 && totalItemCount > 0, children: jsxRuntime.jsxs("span", { className: styles.pageSizeText, children: ["Showing ", startNumber, " through ", endNumber, " of ", totalItemCount, ' ', "items"] }) })] }), jsxRuntime.jsxs("div", { className: styles.pageBtnContainer, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("span", { children: ["Page", ' ', jsxRuntime.jsxs("strong", { children: [table.getState().pagination.pageIndex + 1, " of", ' ', table.getPageCount()] })] }), jsxRuntime.jsxs("span", { children: [' ', "| Go to page:", ' ', jsxRuntime.jsx(reactComponents.Input, { type: "number", size: "small", value: `${table.getState().pagination.pageIndex + 1}`, onChange: (e, data) => {
|
|
161
164
|
const page = data.value ? Number(e.target.value) - 1 : 0;
|
|
162
165
|
if (page >= 0 && page < table.getPageCount()) {
|
|
163
166
|
table.setPageIndex(page);
|
|
164
167
|
}
|
|
165
|
-
}, className: styles.pageSizeInput, "aria-label": "Page Number", autoComplete:
|
|
168
|
+
}, className: styles.pageSizeInput, "aria-label": "Page Number", autoComplete: 'off', autoCorrect: 'off' })] })] }), jsxRuntime.jsx(reactComponents.Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), icon: jsxRuntime.jsx(reactIcons.PreviousRegular, {}), "aria-label": "Go to first page" }), jsxRuntime.jsx(reactComponents.Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), icon: jsxRuntime.jsx(reactIcons.ArrowPreviousFilled, {}), "aria-label": "Go to previous page" }), jsxRuntime.jsx(reactControlFlow.For, { each: pageSelectionOptions, children: (option, index) => (jsxRuntime.jsx(reactComponents.Button, { shape: "circular", appearance: option - 1 === currentPage ? 'primary' : undefined, onClick: () => table.setPageIndex(option - 1), "aria-label": `Show Page ${option}`, size: "small", className: styles.pageBtn, children: option }, index)) }), jsxRuntime.jsx(reactComponents.Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), icon: jsxRuntime.jsx(reactIcons.ArrowNextFilled, {}), "aria-label": "Go to next page" }), jsxRuntime.jsx(reactComponents.Button, { size: "small", shape: "circular", className: styles.pageBtn, onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), icon: jsxRuntime.jsx(reactIcons.NextRegular, {}), "aria-label": "Go to last page" })] })] }) }));
|
|
166
169
|
};
|
|
167
170
|
|
|
168
171
|
reactIcons.bundleIcon(reactIcons.SaveFilled, reactIcons.SaveRegular);
|
package/index.esm.js
CHANGED
|
@@ -113,7 +113,7 @@ const DEFAULT_NUMBER_OF_PAGE_BTN = 5;
|
|
|
113
113
|
const Pagination = (props) => {
|
|
114
114
|
const { table } = props;
|
|
115
115
|
const { pageSizeOptions } = table.options.meta || {};
|
|
116
|
-
const pageSizeSelectionId = useId(
|
|
116
|
+
const pageSizeSelectionId = useId('page-size-selector');
|
|
117
117
|
const styles = usePaginationStyle();
|
|
118
118
|
const totalNumberOfPage = table.getPageCount();
|
|
119
119
|
const currentPage = table.getState().pagination.pageIndex;
|
|
@@ -121,14 +121,17 @@ const Pagination = (props) => {
|
|
|
121
121
|
// get total item count and number of item in current page
|
|
122
122
|
const totalItemCount = table.getFilteredRowModel().rows.length;
|
|
123
123
|
const numberOfItemsInCurrentPage = table.getRowModel().rows.length;
|
|
124
|
+
const startNumber = currentPage * pageSize + 1;
|
|
125
|
+
const endNumber = Math.min(startNumber + numberOfItemsInCurrentPage - 1, totalItemCount);
|
|
124
126
|
const pageSelectionOptions = useMemo(() => {
|
|
125
127
|
let start = currentPage - Math.floor(DEFAULT_NUMBER_OF_PAGE_BTN / 2);
|
|
126
128
|
let end = currentPage + Math.floor(DEFAULT_NUMBER_OF_PAGE_BTN / 2);
|
|
127
129
|
if (start < 1) {
|
|
128
130
|
start = 1;
|
|
129
|
-
end =
|
|
130
|
-
|
|
131
|
-
|
|
131
|
+
end =
|
|
132
|
+
totalNumberOfPage > DEFAULT_NUMBER_OF_PAGE_BTN
|
|
133
|
+
? DEFAULT_NUMBER_OF_PAGE_BTN
|
|
134
|
+
: totalNumberOfPage;
|
|
132
135
|
}
|
|
133
136
|
else if (end > totalNumberOfPage) {
|
|
134
137
|
const possibleStart = totalNumberOfPage - DEFAULT_NUMBER_OF_PAGE_BTN + 1;
|
|
@@ -138,12 +141,12 @@ const Pagination = (props) => {
|
|
|
138
141
|
const currentPageOptions = end - start >= 0 ? range(start, end) : [];
|
|
139
142
|
return (currentPageOptions === null || currentPageOptions === void 0 ? void 0 : currentPageOptions.length) ? [...currentPageOptions] : [1];
|
|
140
143
|
}, [totalNumberOfPage, currentPage]);
|
|
141
|
-
return (jsx("div", { className: styles.paginationContainer, children: jsxs("div", { className: styles.wrapper, children: [jsxs("div", { className: styles.pageSelectionWrapper, children: [jsx(Dropdown, { id: pageSizeSelectionId, size: "small", selectedOptions: [`${pageSize}`], placeholder: "Select Page Size", value: table.getState().pagination.pageSize.toString(), onOptionSelect: (_, data) => { var _a; return table.setPageSize(Number(+((_a = data.selectedOptions) === null || _a === void 0 ? void 0 : _a[0]))); }, className: styles.pageSelectionDropdown, "aria-label":
|
|
144
|
+
return (jsx("div", { className: styles.paginationContainer, children: jsxs("div", { className: styles.wrapper, children: [jsxs("div", { className: styles.pageSelectionWrapper, children: [jsx(Dropdown, { id: pageSizeSelectionId, size: "small", selectedOptions: [`${pageSize}`], placeholder: "Select Page Size", value: table.getState().pagination.pageSize.toString(), onOptionSelect: (_, data) => { var _a; return table.setPageSize(Number(+((_a = data.selectedOptions) === null || _a === void 0 ? void 0 : _a[0]))); }, className: styles.pageSelectionDropdown, "aria-label": 'Select Page Size', style: { minWidth: 80 }, children: jsx(Show, { when: (pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.length) > 0, children: jsx(For, { each: pageSizeOptions, children: (option) => (jsx(Option, { value: `${option}`, children: `${option}` }, option)) }) }) }), jsx(Show, { when: (pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.length) > 0 && totalItemCount > 0, children: jsxs("span", { className: styles.pageSizeText, children: ["Showing ", startNumber, " through ", endNumber, " of ", totalItemCount, ' ', "items"] }) })] }), jsxs("div", { className: styles.pageBtnContainer, children: [jsxs("div", { children: [jsxs("span", { children: ["Page", ' ', jsxs("strong", { children: [table.getState().pagination.pageIndex + 1, " of", ' ', table.getPageCount()] })] }), jsxs("span", { children: [' ', "| Go to page:", ' ', jsx(Input, { type: "number", size: "small", value: `${table.getState().pagination.pageIndex + 1}`, onChange: (e, data) => {
|
|
142
145
|
const page = data.value ? Number(e.target.value) - 1 : 0;
|
|
143
146
|
if (page >= 0 && page < table.getPageCount()) {
|
|
144
147
|
table.setPageIndex(page);
|
|
145
148
|
}
|
|
146
|
-
}, className: styles.pageSizeInput, "aria-label": "Page Number", autoComplete:
|
|
149
|
+
}, className: styles.pageSizeInput, "aria-label": "Page Number", autoComplete: 'off', autoCorrect: 'off' })] })] }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), icon: jsx(PreviousRegular, {}), "aria-label": "Go to first page" }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), icon: jsx(ArrowPreviousFilled, {}), "aria-label": "Go to previous page" }), jsx(For, { each: pageSelectionOptions, children: (option, index) => (jsx(Button, { shape: "circular", appearance: option - 1 === currentPage ? 'primary' : undefined, onClick: () => table.setPageIndex(option - 1), "aria-label": `Show Page ${option}`, size: "small", className: styles.pageBtn, children: option }, index)) }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), icon: jsx(ArrowNextFilled, {}), "aria-label": "Go to next page" }), jsx(Button, { size: "small", shape: "circular", className: styles.pageBtn, onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), icon: jsx(NextRegular, {}), "aria-label": "Go to last page" })] })] }) }));
|
|
147
150
|
};
|
|
148
151
|
|
|
149
152
|
bundleIcon(SaveFilled, SaveRegular);
|
package/package.json
CHANGED