@bsol-oss/react-datatable5 1.0.57 → 1.0.59

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 +22 -15
  3. package/dist/index.mjs +22 -15
  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,37 +328,39 @@ 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));
333
+ }
334
+ if (!column.getCanFilter()) {
335
+ return jsxRuntime.jsx(jsxRuntime.Fragment, {});
328
336
  }
329
337
  if (filterVariant === "select") {
330
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) => {
331
339
  column.setFilterValue(e.target.value);
332
340
  }, children: filterOptions.map((option) => {
333
- return jsxRuntime.jsx("option", { value: option, children: option });
334
- }) })] }));
341
+ return (jsxRuntime.jsx("option", { value: option, children: option }, `${option}`));
342
+ }) })] }, column.id));
335
343
  }
336
344
  if (filterVariant === "range") {
337
345
  const filterValue = column.getFilterValue() ?? [
338
346
  undefined,
339
347
  undefined,
340
348
  ];
341
- console.log(column.getFilterValue(), "sgr");
342
349
  const [min, max] = filterValue;
343
- 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) => {
344
351
  column.setFilterValue([Number(e.target.value), max]);
345
352
  } }), jsxRuntime.jsx(react$1.Input, { type: "number", placeholder: "max", value: max, onChange: (e) => {
346
353
  column.setFilterValue([min, Number(e.target.value)]);
347
- } })] })] }));
354
+ } })] })] }, column.id));
348
355
  }
349
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) => {
350
357
  column.setFilterValue(e.target.value);
351
- } })] }));
358
+ } })] }, column.id));
352
359
  }
353
360
  const TableFilter = () => {
354
361
  const { table } = useDataTable();
355
362
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getAllColumns().map((column) => {
356
- return jsxRuntime.jsx(Filter, { column: column });
363
+ return jsxRuntime.jsx(Filter, { column: column }, column.id);
357
364
  }) }));
358
365
  };
359
366
 
@@ -381,7 +388,7 @@ const TableViewer = () => {
381
388
  const displayName = column.columnDef.meta === undefined
382
389
  ? column.id
383
390
  : column.columnDef.meta.displayName;
384
- 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));
385
392
  }), provided.placeholder] })) }) }) }));
386
393
  };
387
394
 
@@ -473,7 +480,7 @@ const TableFilterTags = () => {
473
480
  table.setColumnFilters(table.getState().columnFilters.filter((value, curIndex) => {
474
481
  return curIndex != index;
475
482
  }));
476
- }, "aria-label": "remove filter" })] }));
483
+ }, "aria-label": "remove filter" })] }, `${id}-${value}`));
477
484
  }) }));
478
485
  };
479
486
 
@@ -645,7 +652,7 @@ const ColumnOrderChanger = ({ columns }) => {
645
652
  const displayName = column.columnDef.meta === undefined
646
653
  ? column.id
647
654
  : column.columnDef.meta.displayName;
648
- return jsxRuntime.jsx(jsxRuntime.Fragment, { children: displayName });
655
+ return jsxRuntime.jsx("span", { children: displayName }, column.id);
649
656
  }), jsxRuntime.jsx(react$1.IconButton, { onClick: () => {
650
657
  const nextIndex = index + 1;
651
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,37 +326,39 @@ 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));
331
+ }
332
+ if (!column.getCanFilter()) {
333
+ return jsx(Fragment, {});
326
334
  }
327
335
  if (filterVariant === "select") {
328
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) => {
329
337
  column.setFilterValue(e.target.value);
330
338
  }, children: filterOptions.map((option) => {
331
- return jsx("option", { value: option, children: option });
332
- }) })] }));
339
+ return (jsx("option", { value: option, children: option }, `${option}`));
340
+ }) })] }, column.id));
333
341
  }
334
342
  if (filterVariant === "range") {
335
343
  const filterValue = column.getFilterValue() ?? [
336
344
  undefined,
337
345
  undefined,
338
346
  ];
339
- console.log(column.getFilterValue(), "sgr");
340
347
  const [min, max] = filterValue;
341
- 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) => {
342
349
  column.setFilterValue([Number(e.target.value), max]);
343
350
  } }), jsx(Input, { type: "number", placeholder: "max", value: max, onChange: (e) => {
344
351
  column.setFilterValue([min, Number(e.target.value)]);
345
- } })] })] }));
352
+ } })] })] }, column.id));
346
353
  }
347
354
  return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(Input, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", onChange: (e) => {
348
355
  column.setFilterValue(e.target.value);
349
- } })] }));
356
+ } })] }, column.id));
350
357
  }
351
358
  const TableFilter = () => {
352
359
  const { table } = useDataTable();
353
360
  return (jsx(Fragment, { children: table.getAllColumns().map((column) => {
354
- return jsx(Filter, { column: column });
361
+ return jsx(Filter, { column: column }, column.id);
355
362
  }) }));
356
363
  };
357
364
 
@@ -379,7 +386,7 @@ const TableViewer = () => {
379
386
  const displayName = column.columnDef.meta === undefined
380
387
  ? column.id
381
388
  : column.columnDef.meta.displayName;
382
- 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));
383
390
  }), provided.placeholder] })) }) }) }));
384
391
  };
385
392
 
@@ -471,7 +478,7 @@ const TableFilterTags = () => {
471
478
  table.setColumnFilters(table.getState().columnFilters.filter((value, curIndex) => {
472
479
  return curIndex != index;
473
480
  }));
474
- }, "aria-label": "remove filter" })] }));
481
+ }, "aria-label": "remove filter" })] }, `${id}-${value}`));
475
482
  }) }));
476
483
  };
477
484
 
@@ -643,7 +650,7 @@ const ColumnOrderChanger = ({ columns }) => {
643
650
  const displayName = column.columnDef.meta === undefined
644
651
  ? column.id
645
652
  : column.columnDef.meta.displayName;
646
- return jsx(Fragment, { children: displayName });
653
+ return jsx("span", { children: displayName }, column.id);
647
654
  }), jsx(IconButton, { onClick: () => {
648
655
  const nextIndex = index + 1;
649
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.57",
3
+ "version": "1.0.59",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",