@bsol-oss/react-datatable5 1.0.58 → 1.0.60

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.
Files changed (5) hide show
  1. package/dist/index.d.ts +3 -1
  2. package/dist/index.js +20 -16
  3. package/dist/index.mjs +20 -16
  4. package/dist/types/components/useDataFromUrl.d.ts +3 -1
  5. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -264,8 +264,10 @@ interface useDataFromUrlProps<T> {
264
264
  url: string;
265
265
  params?: object;
266
266
  defaultData: T;
267
+ disableFirstFetch?: boolean;
268
+ onFetchSuccess?: (data: T) => void;
267
269
  }
268
- declare const useDataFromUrl: <T>({ url, params, defaultData, }: useDataFromUrlProps<T>) => useDataFromUrlReturn<T>;
270
+ declare const useDataFromUrl: <T>({ url, params, disableFirstFetch, onFetchSuccess, defaultData, }: useDataFromUrlProps<T>) => useDataFromUrlReturn<T>;
269
271
 
270
272
  declare const useDataTable: () => {
271
273
  table: _tanstack_table_core.Table<any>;
package/dist/index.js CHANGED
@@ -175,7 +175,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
175
175
  }, children: children }));
176
176
  };
177
177
 
178
- const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
178
+ const useDataFromUrl = ({ url, params = {}, disableFirstFetch = false, onFetchSuccess = () => { }, defaultData, }) => {
179
179
  const [loading, setLoading] = react.useState(true);
180
180
  const [hasError, setHasError] = react.useState(false);
181
181
  const [data, setData] = react.useState(defaultData);
@@ -186,17 +186,21 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
186
186
  try {
187
187
  setLoading(true);
188
188
  const { data } = await axios.get(url, { params: params });
189
- console.log("get DataFromUrl success", data);
189
+ console.debug("get DataFromUrl success", data);
190
+ onFetchSuccess(data);
190
191
  setLoading(false);
191
192
  setData(data);
192
193
  }
193
194
  catch (e) {
194
- console.log(e);
195
+ console.log("Error", e);
195
196
  setLoading(false);
196
197
  setHasError(true);
197
198
  }
198
199
  };
199
200
  react.useEffect(() => {
201
+ if (disableFirstFetch) {
202
+ return;
203
+ }
200
204
  getData().catch((e) => {
201
205
  console.error(e);
202
206
  });
@@ -239,6 +243,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
239
243
  }, {})),
240
244
  searching: globalFilter,
241
245
  },
246
+ disableFirstFetch: true,
242
247
  });
243
248
  const table = reactTable.useReactTable({
244
249
  _features: [DensityFeature],
@@ -323,8 +328,8 @@ function Filter({ column }) {
323
328
  const filterOptions = column.columnDef.meta?.filterOptions ?? [];
324
329
  if (column.columns.length > 0) {
325
330
  return (jsxRuntime.jsxs(react$1.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react$1.Text, { children: displayName }), column.columns.map((column) => {
326
- return jsxRuntime.jsx(Filter, { column: column });
327
- })] }));
331
+ return jsxRuntime.jsx(Filter, { column: column }, column.id);
332
+ })] }, column.id));
328
333
  }
329
334
  if (!column.getCanFilter()) {
330
335
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
@@ -333,30 +338,29 @@ function Filter({ column }) {
333
338
  return (jsxRuntime.jsxs(react$1.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react$1.Text, { children: displayName }), jsxRuntime.jsx(react$1.Select, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", placeholder: "Select option", onChange: (e) => {
334
339
  column.setFilterValue(e.target.value);
335
340
  }, children: filterOptions.map((option) => {
336
- return jsxRuntime.jsx("option", { value: option, children: option });
337
- }) })] }));
341
+ return (jsxRuntime.jsx("option", { value: option, children: option }, `${option}`));
342
+ }) })] }, column.id));
338
343
  }
339
344
  if (filterVariant === "range") {
340
345
  const filterValue = column.getFilterValue() ?? [
341
346
  undefined,
342
347
  undefined,
343
348
  ];
344
- console.log(column.getFilterValue(), "sgr");
345
349
  const [min, max] = filterValue;
346
- return (jsxRuntime.jsxs(react$1.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react$1.Text, { children: displayName }), jsxRuntime.jsxs(react$1.Flex, { gap: "0.25rem", children: [jsxRuntime.jsx(react$1.Input, { type: "number", placeholder: "min", value: min, onChange: (e) => {
350
+ return (jsxRuntime.jsxs(react$1.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react$1.Text, { children: displayName }), jsxRuntime.jsxs(react$1.Flex, { gap: "0.5rem", children: [jsxRuntime.jsx(react$1.Input, { type: "number", placeholder: "min", value: min, onChange: (e) => {
347
351
  column.setFilterValue([Number(e.target.value), max]);
348
352
  } }), jsxRuntime.jsx(react$1.Input, { type: "number", placeholder: "max", value: max, onChange: (e) => {
349
353
  column.setFilterValue([min, Number(e.target.value)]);
350
- } })] })] }));
354
+ } })] })] }, column.id));
351
355
  }
352
356
  return (jsxRuntime.jsxs(react$1.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react$1.Text, { children: displayName }), jsxRuntime.jsx(react$1.Input, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", onChange: (e) => {
353
357
  column.setFilterValue(e.target.value);
354
- } })] }));
358
+ } })] }, column.id));
355
359
  }
356
360
  const TableFilter = () => {
357
361
  const { table } = useDataTable();
358
362
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getAllColumns().map((column) => {
359
- return jsxRuntime.jsx(Filter, { column: column });
363
+ return jsxRuntime.jsx(Filter, { column: column }, column.id);
360
364
  }) }));
361
365
  };
362
366
 
@@ -384,7 +388,7 @@ const TableViewer = () => {
384
388
  const displayName = column.columnDef.meta === undefined
385
389
  ? column.id
386
390
  : column.columnDef.meta.displayName;
387
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(reactBeautifulDnd.Draggable, { draggableId: column.id, index: i, children: (provided) => (jsxRuntime.jsxs(react$1.Grid, { ref: provided.innerRef, ...provided.draggableProps, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", children: [jsxRuntime.jsx(react$1.Flex, { ...provided.dragHandleProps, alignItems: "center", padding: "auto 0 auto 0", children: jsxRuntime.jsx(react$1.Icon, { as: fa.FaGripLinesVertical, color: "gray.400" }) }), jsxRuntime.jsxs(react$1.Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsxs(react$1.Box, { children: [" ", displayName] }), jsxRuntime.jsx(react$1.Switch, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() })] })] })) }, column.id) }));
391
+ return (jsxRuntime.jsx(reactBeautifulDnd.Draggable, { draggableId: column.id, index: i, children: (provided) => (jsxRuntime.jsxs(react$1.Grid, { ref: provided.innerRef, ...provided.draggableProps, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", children: [jsxRuntime.jsx(react$1.Flex, { ...provided.dragHandleProps, alignItems: "center", padding: "auto 0 auto 0", children: jsxRuntime.jsx(react$1.Icon, { as: fa.FaGripLinesVertical, color: "gray.400" }) }), jsxRuntime.jsxs(react$1.Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsxs(react$1.Box, { children: [" ", displayName] }), jsxRuntime.jsx(react$1.Switch, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() })] })] }, column.id)) }, column.id));
388
392
  }), provided.placeholder] })) }) }) }));
389
393
  };
390
394
 
@@ -463,7 +467,7 @@ const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gr
463
467
  }
464
468
  : {}),
465
469
  // styling resize and pinning end
466
- display: "grid", children: [!isCheckBoxVisible(index, row) && (jsxRuntime.jsx(react$1.Box, { as: "span", margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, children: index + 1 })), isCheckBoxVisible(index, row) && (jsxRuntime.jsx(react$1.FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(react$1.Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: row.getIsSelected(),
470
+ display: "grid", children: [!isCheckBoxVisible(index, row) && (jsxRuntime.jsx(react$1.Box, { as: "span", margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` })), isCheckBoxVisible(index, row) && (jsxRuntime.jsx(react$1.FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(react$1.Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: row.getIsSelected(),
467
471
  disabled: !row.getCanSelect(),
468
472
  // indeterminate: row.getIsSomeSelected(),
469
473
  onChange: row.getToggleSelectedHandler() }) }))] }));
@@ -476,7 +480,7 @@ const TableFilterTags = () => {
476
480
  table.setColumnFilters(table.getState().columnFilters.filter((value, curIndex) => {
477
481
  return curIndex != index;
478
482
  }));
479
- }, "aria-label": "remove filter" })] }));
483
+ }, "aria-label": "remove filter" })] }, `${id}-${value}`));
480
484
  }) }));
481
485
  };
482
486
 
@@ -648,7 +652,7 @@ const ColumnOrderChanger = ({ columns }) => {
648
652
  const displayName = column.columnDef.meta === undefined
649
653
  ? column.id
650
654
  : column.columnDef.meta.displayName;
651
- return jsxRuntime.jsx(jsxRuntime.Fragment, { children: displayName });
655
+ return jsxRuntime.jsx("span", { children: displayName }, column.id);
652
656
  }), jsxRuntime.jsx(react$1.IconButton, { onClick: () => {
653
657
  const nextIndex = index + 1;
654
658
  if (nextIndex < order.length) {
package/dist/index.mjs CHANGED
@@ -173,7 +173,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
173
173
  }, children: children }));
174
174
  };
175
175
 
176
- const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
176
+ const useDataFromUrl = ({ url, params = {}, disableFirstFetch = false, onFetchSuccess = () => { }, defaultData, }) => {
177
177
  const [loading, setLoading] = useState(true);
178
178
  const [hasError, setHasError] = useState(false);
179
179
  const [data, setData] = useState(defaultData);
@@ -184,17 +184,21 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
184
184
  try {
185
185
  setLoading(true);
186
186
  const { data } = await axios.get(url, { params: params });
187
- console.log("get DataFromUrl success", data);
187
+ console.debug("get DataFromUrl success", data);
188
+ onFetchSuccess(data);
188
189
  setLoading(false);
189
190
  setData(data);
190
191
  }
191
192
  catch (e) {
192
- console.log(e);
193
+ console.log("Error", e);
193
194
  setLoading(false);
194
195
  setHasError(true);
195
196
  }
196
197
  };
197
198
  useEffect(() => {
199
+ if (disableFirstFetch) {
200
+ return;
201
+ }
198
202
  getData().catch((e) => {
199
203
  console.error(e);
200
204
  });
@@ -237,6 +241,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
237
241
  }, {})),
238
242
  searching: globalFilter,
239
243
  },
244
+ disableFirstFetch: true,
240
245
  });
241
246
  const table = useReactTable({
242
247
  _features: [DensityFeature],
@@ -321,8 +326,8 @@ function Filter({ column }) {
321
326
  const filterOptions = column.columnDef.meta?.filterOptions ?? [];
322
327
  if (column.columns.length > 0) {
323
328
  return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), column.columns.map((column) => {
324
- return jsx(Filter, { column: column });
325
- })] }));
329
+ return jsx(Filter, { column: column }, column.id);
330
+ })] }, column.id));
326
331
  }
327
332
  if (!column.getCanFilter()) {
328
333
  return jsx(Fragment, {});
@@ -331,30 +336,29 @@ function Filter({ column }) {
331
336
  return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(Select, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", placeholder: "Select option", onChange: (e) => {
332
337
  column.setFilterValue(e.target.value);
333
338
  }, children: filterOptions.map((option) => {
334
- return jsx("option", { value: option, children: option });
335
- }) })] }));
339
+ return (jsx("option", { value: option, children: option }, `${option}`));
340
+ }) })] }, column.id));
336
341
  }
337
342
  if (filterVariant === "range") {
338
343
  const filterValue = column.getFilterValue() ?? [
339
344
  undefined,
340
345
  undefined,
341
346
  ];
342
- console.log(column.getFilterValue(), "sgr");
343
347
  const [min, max] = filterValue;
344
- return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsxs(Flex, { gap: "0.25rem", children: [jsx(Input, { type: "number", placeholder: "min", value: min, onChange: (e) => {
348
+ return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsxs(Flex, { gap: "0.5rem", children: [jsx(Input, { type: "number", placeholder: "min", value: min, onChange: (e) => {
345
349
  column.setFilterValue([Number(e.target.value), max]);
346
350
  } }), jsx(Input, { type: "number", placeholder: "max", value: max, onChange: (e) => {
347
351
  column.setFilterValue([min, Number(e.target.value)]);
348
- } })] })] }));
352
+ } })] })] }, column.id));
349
353
  }
350
354
  return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(Input, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", onChange: (e) => {
351
355
  column.setFilterValue(e.target.value);
352
- } })] }));
356
+ } })] }, column.id));
353
357
  }
354
358
  const TableFilter = () => {
355
359
  const { table } = useDataTable();
356
360
  return (jsx(Fragment, { children: table.getAllColumns().map((column) => {
357
- return jsx(Filter, { column: column });
361
+ return jsx(Filter, { column: column }, column.id);
358
362
  }) }));
359
363
  };
360
364
 
@@ -382,7 +386,7 @@ const TableViewer = () => {
382
386
  const displayName = column.columnDef.meta === undefined
383
387
  ? column.id
384
388
  : column.columnDef.meta.displayName;
385
- return (jsx(Fragment, { children: jsx(Draggable, { draggableId: column.id, index: i, children: (provided) => (jsxs(Grid, { ref: provided.innerRef, ...provided.draggableProps, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", children: [jsx(Flex, { ...provided.dragHandleProps, alignItems: "center", padding: "auto 0 auto 0", children: jsx(Icon, { as: FaGripLinesVertical, color: "gray.400" }) }), jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxs(Box, { children: [" ", displayName] }), jsx(Switch, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() })] })] })) }, column.id) }));
389
+ return (jsx(Draggable, { draggableId: column.id, index: i, children: (provided) => (jsxs(Grid, { ref: provided.innerRef, ...provided.draggableProps, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", children: [jsx(Flex, { ...provided.dragHandleProps, alignItems: "center", padding: "auto 0 auto 0", children: jsx(Icon, { as: FaGripLinesVertical, color: "gray.400" }) }), jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxs(Box, { children: [" ", displayName] }), jsx(Switch, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() })] })] }, column.id)) }, column.id));
386
390
  }), provided.placeholder] })) }) }) }));
387
391
  };
388
392
 
@@ -461,7 +465,7 @@ const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gr
461
465
  }
462
466
  : {}),
463
467
  // styling resize and pinning end
464
- display: "grid", children: [!isCheckBoxVisible(index, row) && (jsx(Box, { as: "span", margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, children: index + 1 })), isCheckBoxVisible(index, row) && (jsx(FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: row.getIsSelected(),
468
+ display: "grid", children: [!isCheckBoxVisible(index, row) && (jsx(Box, { as: "span", margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` })), isCheckBoxVisible(index, row) && (jsx(FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: row.getIsSelected(),
465
469
  disabled: !row.getCanSelect(),
466
470
  // indeterminate: row.getIsSomeSelected(),
467
471
  onChange: row.getToggleSelectedHandler() }) }))] }));
@@ -474,7 +478,7 @@ const TableFilterTags = () => {
474
478
  table.setColumnFilters(table.getState().columnFilters.filter((value, curIndex) => {
475
479
  return curIndex != index;
476
480
  }));
477
- }, "aria-label": "remove filter" })] }));
481
+ }, "aria-label": "remove filter" })] }, `${id}-${value}`));
478
482
  }) }));
479
483
  };
480
484
 
@@ -646,7 +650,7 @@ const ColumnOrderChanger = ({ columns }) => {
646
650
  const displayName = column.columnDef.meta === undefined
647
651
  ? column.id
648
652
  : column.columnDef.meta.displayName;
649
- return jsx(Fragment, { children: displayName });
653
+ return jsx("span", { children: displayName }, column.id);
650
654
  }), jsx(IconButton, { onClick: () => {
651
655
  const nextIndex = index + 1;
652
656
  if (nextIndex < order.length) {
package/dist/types/components/useDataFromUrl.d.ts CHANGED
@@ -8,5 +8,7 @@ export interface useDataFromUrlProps<T> {
8
8
  url: string;
9
9
  params?: object;
10
10
  defaultData: T;
11
+ disableFirstFetch?: boolean;
12
+ onFetchSuccess?: (data: T) => void;
11
13
  }
12
- export declare const useDataFromUrl: <T>({ url, params, defaultData, }: useDataFromUrlProps<T>) => useDataFromUrlReturn<T>;
14
+ export declare const useDataFromUrl: <T>({ url, params, disableFirstFetch, onFetchSuccess, defaultData, }: useDataFromUrlProps<T>) => useDataFromUrlReturn<T>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "1.0.58",
3
+ "version": "1.0.60",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",