Skip to content

Commit 1698676

Browse files
neotobneotob
authored
added option to hide the page size changing (#60)
1 parent a6fc1e8 commit 1698676

7 files changed

Lines changed: 211 additions & 72 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10+
### Added
11+
12+
- option `hidePageSizeChange` added to hide the possibility to change the page size
13+
1014
## [4.0.0] - 2024-03-06
1115

1216
### Added

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
"tsc": "tsc"
4747
},
4848
"dependencies": {
49-
"@neolution-ch/react-pattern-ui": "^3.1.0",
49+
"@neolution-ch/react-pattern-ui": "^3.4.0",
5050
"@tanstack/react-table": "^8.10.7",
5151
"react-loading-skeleton": "^3.3.1"
5252
},

‎src/lib/ReactDataTable/ReactDataTable.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const ReactDataTable = <TData,>(props: ReactDataTableProps<TData>) => {
2222
rowStyle,
2323
pageSizes,
2424
showPaging,
25+
hidePageSizeChange,
2526
onEnter,
2627
totalRecords = table.getCoreRowModel().rows.length,
2728
withoutHeaders = false,
@@ -218,6 +219,7 @@ const ReactDataTable = <TData,>(props: ReactDataTableProps<TData>) => {
218219
showedItemsText: reactDataTableTranslations.showedItemsText,
219220
}}
220221
pagingPossible={true}
222+
changePageSizePossible={!hidePageSizeChange}
221223
/>
222224
)}
223225
</>

‎src/lib/ReactDataTable/ReactDataTableProps.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,11 @@ export interface ReactDataTableProps<TData> {
5656
*/
5757
showPaging?: boolean;
5858

59+
/**
60+
* boolean flag to hide the possibility to change the page size
61+
*/
62+
hidePageSizeChange?: boolean;
63+
5964
/**
6065
* callback that gets trigger by pressing enter or clicking the search icon
6166
*/

‎test/DataTable/DataTable.test.tsx‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,38 @@ describe("DataTable", () => {
141141
);
142142

143143
const { container } = render(
144-
<ReactDataTable table={table} showPaging totalRecords={dataDynamic?.length} isFetching={false} isLoading={false} withoutHeaders />,
144+
<ReactDataTable table={table} totalRecords={dataDynamic?.length} isFetching={false} isLoading={false} withoutHeaders />,
145+
);
146+
147+
expect(container).toMatchSnapshot();
148+
});
149+
150+
test("renders without page changing correctly", () => {
151+
const {
152+
result: {
153+
current: { table },
154+
},
155+
} = renderHook(() =>
156+
useReactDataTable({
157+
data: dataDynamic,
158+
isLoading: false,
159+
columns,
160+
reactTableOptions: {
161+
enableSortingRemoval: false,
162+
},
163+
}),
164+
);
165+
166+
const { container } = render(
167+
<ReactDataTable
168+
table={table}
169+
showPaging
170+
totalRecords={dataDynamic?.length}
171+
isFetching={false}
172+
isLoading={false}
173+
withoutHeaders
174+
hidePageSizeChange
175+
/>,
145176
);
146177

147178
expect(container).toMatchSnapshot();

‎test/DataTable/__snapshots__/DataTable.test.tsx.snap‎

Lines changed: 163 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -751,7 +751,7 @@ exports[`DataTable renders without header correctly 1`] = `
751751
</div>
752752
`;
753753

754-
exports[`DataTable renders without paging correctly 1`] = `
754+
exports[`DataTable renders without page changing correctly 1`] = `
755755
<div>
756756
<style>
757757
@@ -921,71 +921,6 @@ exports[`DataTable renders without paging correctly 1`] = `
921921
class="col-6"
922922
style="padding-left: 0px;"
923923
>
924-
<div
925-
class="btn-group"
926-
>
927-
<button
928-
aria-expanded="false"
929-
aria-haspopup="true"
930-
class="dropdown-toggle btn btn-link btn-sm"
931-
type="button"
932-
>
933-
10
934-
</button>
935-
<div
936-
aria-hidden="true"
937-
class="dropdown-menu"
938-
role="menu"
939-
tabindex="-1"
940-
>
941-
<h6
942-
class="dropdown-header"
943-
tabindex="-1"
944-
>
945-
Anzahl pro Seite
946-
</h6>
947-
<button
948-
class="dropdown-item"
949-
role="menuitem"
950-
tabindex="0"
951-
type="button"
952-
>
953-
10
954-
</button>
955-
<button
956-
class="dropdown-item"
957-
role="menuitem"
958-
tabindex="0"
959-
type="button"
960-
>
961-
25
962-
</button>
963-
<button
964-
class="dropdown-item"
965-
role="menuitem"
966-
tabindex="0"
967-
type="button"
968-
>
969-
50
970-
</button>
971-
<button
972-
class="dropdown-item"
973-
role="menuitem"
974-
tabindex="0"
975-
type="button"
976-
>
977-
100
978-
</button>
979-
<button
980-
class="dropdown-item"
981-
role="menuitem"
982-
tabindex="0"
983-
type="button"
984-
>
985-
200
986-
</button>
987-
</div>
988-
</div>
989924
<span
990925
class="small ml-2"
991926
>
@@ -1074,3 +1009,165 @@ exports[`DataTable renders without paging correctly 1`] = `
10741009
</div>
10751010
</div>
10761011
`;
1012+
1013+
exports[`DataTable renders without paging correctly 1`] = `
1014+
<div>
1015+
<style>
1016+
1017+
@-webkit-keyframes reloadingAnimation {
1018+
0%{
1019+
background-position-x: 200%
1020+
}
1021+
100%{
1022+
background-position-x: 0%
1023+
}
1024+
}
1025+
</style>
1026+
<table
1027+
class="table table-sm table-striped table-hover"
1028+
>
1029+
<tbody>
1030+
<tr>
1031+
<td>
1032+
Name 000
1033+
</td>
1034+
<td>
1035+
0
1036+
</td>
1037+
<td>
1038+
1
1039+
</td>
1040+
<td>
1041+
31.01.2023
1042+
</td>
1043+
</tr>
1044+
<tr>
1045+
<td>
1046+
Name 001
1047+
</td>
1048+
<td>
1049+
1
1050+
</td>
1051+
<td>
1052+
0
1053+
</td>
1054+
<td>
1055+
30.01.2023
1056+
</td>
1057+
</tr>
1058+
<tr>
1059+
<td>
1060+
Name 002
1061+
</td>
1062+
<td>
1063+
2
1064+
</td>
1065+
<td>
1066+
0
1067+
</td>
1068+
<td>
1069+
29.01.2023
1070+
</td>
1071+
</tr>
1072+
<tr>
1073+
<td>
1074+
Name 003
1075+
</td>
1076+
<td>
1077+
3
1078+
</td>
1079+
<td>
1080+
0
1081+
</td>
1082+
<td>
1083+
28.01.2023
1084+
</td>
1085+
</tr>
1086+
<tr>
1087+
<td>
1088+
Name 004
1089+
</td>
1090+
<td>
1091+
4
1092+
</td>
1093+
<td>
1094+
0
1095+
</td>
1096+
<td>
1097+
27.01.2023
1098+
</td>
1099+
</tr>
1100+
<tr>
1101+
<td>
1102+
Name 005
1103+
</td>
1104+
<td>
1105+
5
1106+
</td>
1107+
<td>
1108+
0
1109+
</td>
1110+
<td>
1111+
26.01.2023
1112+
</td>
1113+
</tr>
1114+
<tr>
1115+
<td>
1116+
Name 006
1117+
</td>
1118+
<td>
1119+
6
1120+
</td>
1121+
<td>
1122+
0
1123+
</td>
1124+
<td>
1125+
25.01.2023
1126+
</td>
1127+
</tr>
1128+
<tr>
1129+
<td>
1130+
Name 007
1131+
</td>
1132+
<td>
1133+
7
1134+
</td>
1135+
<td>
1136+
0
1137+
</td>
1138+
<td>
1139+
24.01.2023
1140+
</td>
1141+
</tr>
1142+
<tr>
1143+
<td>
1144+
Name 008
1145+
</td>
1146+
<td>
1147+
8
1148+
</td>
1149+
<td>
1150+
0
1151+
</td>
1152+
<td>
1153+
23.01.2023
1154+
</td>
1155+
</tr>
1156+
<tr>
1157+
<td>
1158+
Name 009
1159+
</td>
1160+
<td>
1161+
9
1162+
</td>
1163+
<td>
1164+
0
1165+
</td>
1166+
<td>
1167+
22.01.2023
1168+
</td>
1169+
</tr>
1170+
</tbody>
1171+
</table>
1172+
</div>
1173+
`;

‎yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1739,10 +1739,10 @@
17391739
call-me-maybe "^1.0.1"
17401740
glob-to-regexp "^0.3.0"
17411741

1742-
"@neolution-ch/react-pattern-ui@^3.1.0":
1743-
version "3.1.0"
1744-
resolved "https://registry.yarnpkg.com/@neolution-ch/react-pattern-ui/-/react-pattern-ui-3.1.0.tgz#5751ced48c04c0637d02fb48d53de0ff3b729636"
1745-
integrity sha512-zNtOQj7eq0MOK+6dqelG2+cpLojWIyg+jGQhwlIkIBPiPhCS0oItF7Gp4LGbS9zrmPJzGyEIKl3Il/7hlLIYIw==
1742+
"@neolution-ch/react-pattern-ui@^3.4.0":
1743+
version "3.4.0"
1744+
resolved "https://registry.yarnpkg.com/@neolution-ch/react-pattern-ui/-/react-pattern-ui-3.4.0.tgz#5bde72a20b189ebe6e67e88d43ee597f23acdea7"
1745+
integrity sha512-HLfXCIPJjslo6gsBJ5lBeX2BuUIF/dzITuW5+QvYg5RAANaHsSl4+5p2wDtr61xvVQUptc6Ybrp+DeIKAnWDlA==
17461746
dependencies:
17471747
classnames "^2.3.2"
17481748

0 commit comments

Comments
 (0)