@bsol-oss/react-datatable5 12.0.0-beta.53 → 12.0.0-beta.54

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 (6) hide show
  1. package/dist/index.d.ts +3 -0
  2. package/dist/index.js +27 -8
  3. package/dist/index.mjs +27 -8
  4. package/dist/types/components/DataTable/context/DataTableContext.d.ts +3 -0
  5. package/dist/types/components/Filter/TagFilter.d.ts +4 -1
  6. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -171,6 +171,9 @@ interface DataTableLabel {
171
171
  resetSorting: string;
172
172
  rowCountText: string;
173
173
  hasErrorText: string;
174
+ globalFilterPlaceholder: string;
175
+ trueLabel: string;
176
+ falseLabel: string;
174
177
  }
175
178
  interface DataTableContextProps<TData = unknown> extends DataTableProps {
176
179
  table: Table$1<TData>;
package/dist/index.js CHANGED
@@ -104,6 +104,9 @@ const DataTableContext = React.createContext({
104
104
  resetSorting: "Reset Sorting",
105
105
  rowCountText: "Row Count",
106
106
  hasErrorText: "Has Error",
107
+ globalFilterPlaceholder: "Search",
108
+ trueLabel: "True",
109
+ falseLabel: "False",
107
110
  },
108
111
  });
109
112
 
@@ -368,10 +371,14 @@ const TagFilter = ({ availableTags, selectedTags, onTagChange, selectOne = false
368
371
  onTagChange([...selectedTags, tag]);
369
372
  }
370
373
  };
371
- return (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", p: "0.5rem", gap: "0.5rem", children: availableTags.map((tag) => (jsxRuntime.jsx(Tag, { variant: selectedTags.includes(tag) ? "solid" : "outline", cursor: "pointer", closable: selectedTags.includes(tag) ? true : undefined, onClick: () => toggleTag(tag), children: tag }))) }));
374
+ return (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", p: "0.5rem", gap: "0.5rem", children: availableTags.map((tag) => {
375
+ const { label, value } = tag;
376
+ return (jsxRuntime.jsx(Tag, { variant: selectedTags.includes(value) ? "solid" : "outline", cursor: "pointer", closable: selectedTags.includes(value) ? true : undefined, onClick: () => toggleTag(value), children: label ?? value }));
377
+ }) }));
372
378
  };
373
379
 
374
380
  const Filter = ({ column }) => {
381
+ const { tableLabel } = useDataTableContext();
375
382
  const { filterVariant } = column.columnDef.meta ?? {};
376
383
  const displayName = column.columnDef.meta?.displayName ?? column.id;
377
384
  const filterOptions = column.columnDef.meta?.filterOptions ?? [];
@@ -390,7 +397,10 @@ const Filter = ({ column }) => {
390
397
  filterOptions.map((item) => (jsxRuntime.jsx(Radio, { value: item.value, children: item.label }, item.value)))] }) })] }, column.id));
391
398
  }
392
399
  if (filterVariant === "tag") {
393
- return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(TagFilter, { availableTags: filterOptions.map((item) => item.value), selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
400
+ return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(TagFilter, { availableTags: filterOptions.map((item) => ({
401
+ label: item.label,
402
+ value: item.value,
403
+ })), selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
394
404
  if (tags.length === 0) {
395
405
  return column.setFilterValue(undefined);
396
406
  }
@@ -398,7 +408,11 @@ const Filter = ({ column }) => {
398
408
  } })] }, column.id));
399
409
  }
400
410
  if (filterVariant === "boolean") {
401
- return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(TagFilter, { availableTags: ["true", "false"], selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
411
+ const { trueLabel, falseLabel } = tableLabel;
412
+ return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(TagFilter, { availableTags: [
413
+ { label: trueLabel, value: "true" },
414
+ { label: falseLabel, value: "false" },
415
+ ], selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
402
416
  if (tags.length === 0) {
403
417
  return column.setFilterValue(undefined);
404
418
  }
@@ -2541,7 +2555,6 @@ function CardContainer({ location, children }) {
2541
2555
  onDrop: () => setIsDraggedOver(false),
2542
2556
  });
2543
2557
  }, [location]);
2544
- // const isDark = (location + location) % 2 === 1;
2545
2558
  function getColor(isDraggedOver) {
2546
2559
  if (isDraggedOver) {
2547
2560
  return {
@@ -2551,7 +2564,6 @@ function CardContainer({ location, children }) {
2551
2564
  },
2552
2565
  };
2553
2566
  }
2554
- // return isDark ? "lightgrey" : "white";
2555
2567
  return {
2556
2568
  backgroundColor: undefined,
2557
2569
  _dark: {
@@ -2840,6 +2852,9 @@ function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSel
2840
2852
  resetSorting: "Reset Sorting",
2841
2853
  rowCountText: "Row Count",
2842
2854
  hasErrorText: "Has Error",
2855
+ globalFilterPlaceholder: "Search",
2856
+ trueLabel: "True",
2857
+ falseLabel: "False",
2843
2858
  }, }) {
2844
2859
  const table = reactTable.useReactTable({
2845
2860
  _features: [DensityFeature],
@@ -2937,6 +2952,9 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
2937
2952
  resetSorting: "Reset Sorting",
2938
2953
  rowCountText: "Row Count",
2939
2954
  hasErrorText: "Has Error",
2955
+ globalFilterPlaceholder: "Search",
2956
+ trueLabel: "True",
2957
+ falseLabel: "False",
2940
2958
  }, }) {
2941
2959
  const table = reactTable.useReactTable({
2942
2960
  _features: [DensityFeature],
@@ -3024,7 +3042,8 @@ const InputGroup = React__namespace.forwardRef(function InputGroup(props, ref) {
3024
3042
  });
3025
3043
 
3026
3044
  const GlobalFilter = () => {
3027
- const { table } = useDataTableContext();
3045
+ const { table, tableLabel } = useDataTableContext();
3046
+ const { globalFilterPlaceholder } = tableLabel;
3028
3047
  const [searchTerm, setSearchTerm] = React.useState("");
3029
3048
  const debouncedSearchTerm = usehooks.useDebounce(searchTerm, 500);
3030
3049
  React.useEffect(() => {
@@ -3033,7 +3052,7 @@ const GlobalFilter = () => {
3033
3052
  };
3034
3053
  searchHN();
3035
3054
  }, [debouncedSearchTerm]);
3036
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(InputGroup, { flex: "1", startElement: jsxRuntime.jsx(md.MdSearch, {}), children: jsxRuntime.jsx(react.Input, { placeholder: "Outline", variant: "outline", onChange: (e) => {
3055
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(InputGroup, { flex: "1", startElement: jsxRuntime.jsx(md.MdSearch, {}), children: jsxRuntime.jsx(react.Input, { placeholder: globalFilterPlaceholder, variant: "outline", onChange: (e) => {
3037
3056
  setSearchTerm(e.target.value);
3038
3057
  } }) }) }));
3039
3058
  };
@@ -3077,7 +3096,7 @@ const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children
3077
3096
  return (jsxRuntime.jsxs(react.Grid, { templateRows: "auto 1fr", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", gap: "0.5rem", ...gridProps, children: [jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 2, children: [jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsx(react.Box, { children: showView && jsxRuntime.jsx(ViewDialog, { icon: jsxRuntime.jsx(md.MdOutlineViewColumn, {}) }) }), jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsxRuntime.jsx(react.Spinner, { size: "sm" }), hasError && (jsxRuntime.jsx(Tooltip, { content: hasErrorText, children: jsxRuntime.jsx(react.Icon, { as: bs.BsExclamationCircleFill, color: "red.400" }) })), showGlobalFilter && jsxRuntime.jsx(GlobalFilter, {}), showFilter && jsxRuntime.jsx(FilterDialog, {}), showReload && jsxRuntime.jsx(ReloadButton, {}), extraItems] })] }), filterTagsOptions.length > 0 && (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "0.5rem", children: filterTagsOptions.map((option) => {
3078
3097
  const { column, options } = option;
3079
3098
  const tableColumn = table.getColumn(column);
3080
- return (jsxRuntime.jsxs(react.Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [tableColumn?.columnDef.meta?.displayName && (jsxRuntime.jsx(react.Text, { children: tableColumn?.columnDef.meta?.displayName })), jsxRuntime.jsx(TagFilter, { availableTags: options.map((item) => item.value), selectedTags: tableColumn?.getFilterValue() ?? [], selectOne: true, onTagChange: (tags) => {
3099
+ return (jsxRuntime.jsxs(react.Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [tableColumn?.columnDef.meta?.displayName && (jsxRuntime.jsx(react.Text, { children: tableColumn?.columnDef.meta?.displayName })), jsxRuntime.jsx(TagFilter, { availableTags: options, selectedTags: tableColumn?.getFilterValue() ?? [], selectOne: true, onTagChange: (tags) => {
3081
3100
  if (tags.length === 0) {
3082
3101
  return tableColumn?.setFilterValue(undefined);
3083
3102
  }
package/dist/index.mjs CHANGED
@@ -84,6 +84,9 @@ const DataTableContext = createContext({
84
84
  resetSorting: "Reset Sorting",
85
85
  rowCountText: "Row Count",
86
86
  hasErrorText: "Has Error",
87
+ globalFilterPlaceholder: "Search",
88
+ trueLabel: "True",
89
+ falseLabel: "False",
87
90
  },
88
91
  });
89
92
 
@@ -348,10 +351,14 @@ const TagFilter = ({ availableTags, selectedTags, onTagChange, selectOne = false
348
351
  onTagChange([...selectedTags, tag]);
349
352
  }
350
353
  };
351
- return (jsx(Flex, { flexFlow: "wrap", p: "0.5rem", gap: "0.5rem", children: availableTags.map((tag) => (jsx(Tag, { variant: selectedTags.includes(tag) ? "solid" : "outline", cursor: "pointer", closable: selectedTags.includes(tag) ? true : undefined, onClick: () => toggleTag(tag), children: tag }))) }));
354
+ return (jsx(Flex, { flexFlow: "wrap", p: "0.5rem", gap: "0.5rem", children: availableTags.map((tag) => {
355
+ const { label, value } = tag;
356
+ return (jsx(Tag, { variant: selectedTags.includes(value) ? "solid" : "outline", cursor: "pointer", closable: selectedTags.includes(value) ? true : undefined, onClick: () => toggleTag(value), children: label ?? value }));
357
+ }) }));
352
358
  };
353
359
 
354
360
  const Filter = ({ column }) => {
361
+ const { tableLabel } = useDataTableContext();
355
362
  const { filterVariant } = column.columnDef.meta ?? {};
356
363
  const displayName = column.columnDef.meta?.displayName ?? column.id;
357
364
  const filterOptions = column.columnDef.meta?.filterOptions ?? [];
@@ -370,7 +377,10 @@ const Filter = ({ column }) => {
370
377
  filterOptions.map((item) => (jsx(Radio, { value: item.value, children: item.label }, item.value)))] }) })] }, column.id));
371
378
  }
372
379
  if (filterVariant === "tag") {
373
- return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(TagFilter, { availableTags: filterOptions.map((item) => item.value), selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
380
+ return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(TagFilter, { availableTags: filterOptions.map((item) => ({
381
+ label: item.label,
382
+ value: item.value,
383
+ })), selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
374
384
  if (tags.length === 0) {
375
385
  return column.setFilterValue(undefined);
376
386
  }
@@ -378,7 +388,11 @@ const Filter = ({ column }) => {
378
388
  } })] }, column.id));
379
389
  }
380
390
  if (filterVariant === "boolean") {
381
- return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(TagFilter, { availableTags: ["true", "false"], selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
391
+ const { trueLabel, falseLabel } = tableLabel;
392
+ return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(TagFilter, { availableTags: [
393
+ { label: trueLabel, value: "true" },
394
+ { label: falseLabel, value: "false" },
395
+ ], selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
382
396
  if (tags.length === 0) {
383
397
  return column.setFilterValue(undefined);
384
398
  }
@@ -2521,7 +2535,6 @@ function CardContainer({ location, children }) {
2521
2535
  onDrop: () => setIsDraggedOver(false),
2522
2536
  });
2523
2537
  }, [location]);
2524
- // const isDark = (location + location) % 2 === 1;
2525
2538
  function getColor(isDraggedOver) {
2526
2539
  if (isDraggedOver) {
2527
2540
  return {
@@ -2531,7 +2544,6 @@ function CardContainer({ location, children }) {
2531
2544
  },
2532
2545
  };
2533
2546
  }
2534
- // return isDark ? "lightgrey" : "white";
2535
2547
  return {
2536
2548
  backgroundColor: undefined,
2537
2549
  _dark: {
@@ -2820,6 +2832,9 @@ function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSel
2820
2832
  resetSorting: "Reset Sorting",
2821
2833
  rowCountText: "Row Count",
2822
2834
  hasErrorText: "Has Error",
2835
+ globalFilterPlaceholder: "Search",
2836
+ trueLabel: "True",
2837
+ falseLabel: "False",
2823
2838
  }, }) {
2824
2839
  const table = useReactTable({
2825
2840
  _features: [DensityFeature],
@@ -2917,6 +2932,9 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
2917
2932
  resetSorting: "Reset Sorting",
2918
2933
  rowCountText: "Row Count",
2919
2934
  hasErrorText: "Has Error",
2935
+ globalFilterPlaceholder: "Search",
2936
+ trueLabel: "True",
2937
+ falseLabel: "False",
2920
2938
  }, }) {
2921
2939
  const table = useReactTable({
2922
2940
  _features: [DensityFeature],
@@ -3004,7 +3022,8 @@ const InputGroup = React.forwardRef(function InputGroup(props, ref) {
3004
3022
  });
3005
3023
 
3006
3024
  const GlobalFilter = () => {
3007
- const { table } = useDataTableContext();
3025
+ const { table, tableLabel } = useDataTableContext();
3026
+ const { globalFilterPlaceholder } = tableLabel;
3008
3027
  const [searchTerm, setSearchTerm] = useState("");
3009
3028
  const debouncedSearchTerm = useDebounce(searchTerm, 500);
3010
3029
  useEffect(() => {
@@ -3013,7 +3032,7 @@ const GlobalFilter = () => {
3013
3032
  };
3014
3033
  searchHN();
3015
3034
  }, [debouncedSearchTerm]);
3016
- return (jsx(Fragment, { children: jsx(InputGroup, { flex: "1", startElement: jsx(MdSearch, {}), children: jsx(Input, { placeholder: "Outline", variant: "outline", onChange: (e) => {
3035
+ return (jsx(Fragment, { children: jsx(InputGroup, { flex: "1", startElement: jsx(MdSearch, {}), children: jsx(Input, { placeholder: globalFilterPlaceholder, variant: "outline", onChange: (e) => {
3017
3036
  setSearchTerm(e.target.value);
3018
3037
  } }) }) }));
3019
3038
  };
@@ -3057,7 +3076,7 @@ const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children
3057
3076
  return (jsxs(Grid, { templateRows: "auto 1fr", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", gap: "0.5rem", ...gridProps, children: [jsxs(Flex, { flexFlow: "column", gap: 2, children: [jsxs(Flex, { justifyContent: "space-between", children: [jsx(Box, { children: showView && jsx(ViewDialog, { icon: jsx(MdOutlineViewColumn, {}) }) }), jsxs(Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsx(Spinner, { size: "sm" }), hasError && (jsx(Tooltip, { content: hasErrorText, children: jsx(Icon, { as: BsExclamationCircleFill, color: "red.400" }) })), showGlobalFilter && jsx(GlobalFilter, {}), showFilter && jsx(FilterDialog, {}), showReload && jsx(ReloadButton, {}), extraItems] })] }), filterTagsOptions.length > 0 && (jsx(Flex, { flexFlow: "column", gap: "0.5rem", children: filterTagsOptions.map((option) => {
3058
3077
  const { column, options } = option;
3059
3078
  const tableColumn = table.getColumn(column);
3060
- return (jsxs(Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [tableColumn?.columnDef.meta?.displayName && (jsx(Text, { children: tableColumn?.columnDef.meta?.displayName })), jsx(TagFilter, { availableTags: options.map((item) => item.value), selectedTags: tableColumn?.getFilterValue() ?? [], selectOne: true, onTagChange: (tags) => {
3079
+ return (jsxs(Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [tableColumn?.columnDef.meta?.displayName && (jsx(Text, { children: tableColumn?.columnDef.meta?.displayName })), jsx(TagFilter, { availableTags: options, selectedTags: tableColumn?.getFilterValue() ?? [], selectOne: true, onTagChange: (tags) => {
3061
3080
  if (tags.length === 0) {
3062
3081
  return tableColumn?.setFilterValue(undefined);
3063
3082
  }
package/dist/types/components/DataTable/context/DataTableContext.d.ts CHANGED
@@ -15,6 +15,9 @@ export interface DataTableLabel {
15
15
  resetSorting: string;
16
16
  rowCountText: string;
17
17
  hasErrorText: string;
18
+ globalFilterPlaceholder: string;
19
+ trueLabel: string;
20
+ falseLabel: string;
18
21
  }
19
22
  export interface DataTableContextProps<TData = unknown> extends DataTableProps {
20
23
  table: Table<TData>;
package/dist/types/components/Filter/TagFilter.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  import React from "react";
2
2
  interface TagFilterProps {
3
- availableTags: string[];
3
+ availableTags: {
4
+ label?: string;
5
+ value: string;
6
+ }[];
4
7
  selectedTags: string[];
5
8
  selectOne?: boolean;
6
9
  onTagChange: (tags: string[]) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "12.0.0-beta.53",
3
+ "version": "12.0.0-beta.54",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",