@megha-ui/react 1.2.686 → 1.2.688

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.
@@ -34,7 +34,7 @@ import Card from "../card";
34
34
  import { TbAntennaBarsOff, TbCalculator, TbCalculatorFilled, TbCalculatorOff, } from "react-icons/tb";
35
35
  import { TbCopy, TbCopyOff } from "react-icons/tb";
36
36
  import { formatValue } from "../../services/commonService";
37
- const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable = true, paginate, rowsPerPageOptions = [10, 20, 50, 100], defaultRowsPerPage = 100, widthMode = "custom", bulkSelect = false, cellBorder = false, rowHeight = 38, onRowClick, rowCount = false, rowBorder = true, showMenu = false, search = false, defaultSearchOperation = "contains", gridBorder = false, isLoading = false, rowTopBorder, rowBottomBorder, rowLeftBorder, rowRightBorder, headerBackground = "var(--row-header-bg)", headerTopBorder = "none", headerBottomBorder = "none", SettingIcon, ExportIcon, ignoredExportItems = ["action", "actions"], borderColor = "#dbdfe9", updateColumns, showHideAvailable = false, columnSearchOutside = false, multiSorting = false, exportAvailable = false, exportableFileName = "", groupBy, updateGroupBy, rowKey = "id", hlBorderColor = "black", selectedRow, selectedRowStyle = {
37
+ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable = true, paginate, rowsPerPageOptions = [10, 20, 50, 100], defaultRowsPerPage = 100, defaultColumnsPerView = 100, widthMode = "custom", bulkSelect = false, cellBorder = false, rowHeight = 38, onRowClick, rowCount = false, rowBorder = true, showMenu = false, search = false, defaultSearchOperation = "contains", gridBorder = false, isLoading = false, rowTopBorder, rowBottomBorder, rowLeftBorder, rowRightBorder, headerBackground = "var(--row-header-bg)", headerTopBorder = "none", headerBottomBorder = "none", SettingIcon, ExportIcon, ignoredExportItems = ["action", "actions"], borderColor = "#dbdfe9", updateColumns, showHideAvailable = false, columnSearchOutside = false, multiSorting = false, exportAvailable = false, exportableFileName = "", groupBy, updateGroupBy, rowKey = "id", hlBorderColor = "black", selectedRow, selectedRowStyle = {
38
38
  borderLeft: "0.5rem solid #d9d9d9",
39
39
  }, defaultSort, noKeyEvents = true, customOperation, hasCustomOperation, globalSearch, headerDropdownIndex, draggable = false, resizable = false, updateGridData, widthUnits, checkboxWrapper, ignoreHugContent = false, isSummarise = false, isHideDups = false, isMultipleChips = false, fullScreenAvailable = true, defaultGroupOpen, alternateRowColor = true, activeCalculateColor = "#2377BA", calculatetextColor = "#fff", actionsKey = "actions", saveAsNewView = false, handleSaveAsView, saveAsViewIcon, filterData, chipColor = "#ccc", withAscii = false, propSummariseKeys, SummariseIcon, summarizeColor = "black", isExpandable = false, expandedRow, extraRow, selectedCheckBox, setSelectedCheckbox, ignoreRowSelect, setOpenedRows, openedRows, getLoadingState, globalSearchOpen = false, updateFixedFilterValues = (fixedFilterValues) => {
40
40
  console.log("Update fixed filter values not implemented", fixedFilterValues);
@@ -50,7 +50,7 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
50
50
  const [startIndex, _setStartIndex] = useState(0);
51
51
  const [endIndex, setEndIndex] = useState(defaultRowsPerPage);
52
52
  const [startHoriIndex, _setStartHoriIndex] = useState(0);
53
- const [endHoriIndex, setEndHoriIndex] = useState(0);
53
+ const [endHoriIndex, setEndHoriIndex] = useState(defaultColumnsPerView);
54
54
  const [gridGroupBy, setGridGroupBy] = useState("");
55
55
  const [rowIndex, setRowIndex] = useState(-1);
56
56
  const [columnIndex, setColumnIndex] = useState(-1);
@@ -126,7 +126,11 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
126
126
  acc[item.key] = type;
127
127
  return acc;
128
128
  }, {});
129
- _columns = _columns.map((col) => {
129
+ _columns = [
130
+ ...(startHoriIndex > 0 && endHoriIndex > 0
131
+ ? _columns.filter((_, index) => index >= startHoriIndex && index <= endHoriIndex)
132
+ : _columns),
133
+ ].map((col) => {
130
134
  var _a, _b;
131
135
  let isArrayString = false;
132
136
  if (typeof col.isArrayString !== "undefined") {
@@ -147,7 +151,7 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
147
151
  });
148
152
  }
149
153
  setGridColumns(_columns);
150
- }, [columns, data, isMultipleChips]);
154
+ }, [columns, data, isMultipleChips, endHoriIndex, startHoriIndex]);
151
155
  useEffect(() => {
152
156
  if (globalSearchOpen) {
153
157
  setExpandedGI(true);
@@ -1446,7 +1450,7 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
1446
1450
  whiteSpace: "nowrap",
1447
1451
  height: `calc(100% - ${removalHeight})`,
1448
1452
  position: "relative",
1449
- }, onScroll: onScroll, ref: gridRef, children: [_jsx(GridHeader, { columns: gridColumns, startHoriIndex: startHoriIndex, endHoriIndex: endHoriIndex, headerRef: headerRef, resizable: resizable, sortable: sortable, search: search, defaultSearchOperation: defaultSearchOperation, showMenu: showMenu, sortQueries: sortQueries, onSort: handleSort, bulkSelect: bulkSelect, cellStyle: cellStyle, widthMode: widthMode, allRowsSelected: allRowsSelected, someRowsSelected: someRowsSelected, toggleSelectAll: () => toggleSelectAll(paginate ? paginatedData : sortedData, allRowsSelected), onSearch: handleSearch, searchQueries: searchQueries, headerBackground: headerBackground, headerTopBorder: headerTopBorder, headerBottomBorder: headerBottomBorder, groupBy: gridGroupBy, setGroupBy: (value) => {
1453
+ }, onScroll: onScroll, ref: gridRef, children: [_jsx(GridHeader, { columns: gridColumns, headerRef: headerRef, resizable: resizable, sortable: sortable, search: search, defaultSearchOperation: defaultSearchOperation, showMenu: showMenu, sortQueries: sortQueries, onSort: handleSort, bulkSelect: bulkSelect, cellStyle: cellStyle, widthMode: widthMode, allRowsSelected: allRowsSelected, someRowsSelected: someRowsSelected, toggleSelectAll: () => toggleSelectAll(paginate ? paginatedData : sortedData, allRowsSelected), onSearch: handleSearch, searchQueries: searchQueries, headerBackground: headerBackground, headerTopBorder: headerTopBorder, headerBottomBorder: headerBottomBorder, groupBy: gridGroupBy, setGroupBy: (value) => {
1450
1454
  let _gridGroupBy = gridGroupBy;
1451
1455
  _gridGroupBy = _gridGroupBy.split(",").includes(value)
1452
1456
  ? _gridGroupBy
@@ -73,6 +73,7 @@ export interface OjasGridProps {
73
73
  bulkSelect?: boolean;
74
74
  rowsPerPageOptions?: number[];
75
75
  defaultRowsPerPage?: number;
76
+ defaultColumnsPerView?: number;
76
77
  height: string | number;
77
78
  maxHeight?: string | number;
78
79
  width?: string | number;
@@ -1,8 +1,6 @@
1
1
  import React from "react";
2
2
  import { Column, DataRow } from "../types/grid";
3
3
  interface GridHeaderProps {
4
- startHoriIndex: number;
5
- endHoriIndex: number;
6
4
  columns: Column[];
7
5
  sortable: boolean;
8
6
  search?: boolean;
@@ -41,7 +41,7 @@ export const getColumnData = (columnKey, gridData, type) => {
41
41
  return 0;
42
42
  });
43
43
  };
44
- const GridHeader = ({ startHoriIndex, endHoriIndex, columns, onSearch, searchQueries, sortable, search, resizable = false, defaultSearchOperation, sortQueries, onSort, bulkSelect, allRowsSelected, someRowsSelected, toggleSelectAll, cellStyle, widthMode, rowHeight, headerRef, showMenu, headerBackground, headerTopBorder, headerBottomBorder, groupBy, setGroupBy, updateGridColumns, setGridColumns, headerDropdownIndex, widthUnits, textFilterLabel = "Text Filter", gridData, checkboxWrapper, onFilter, setUniqueSearch, uniqueSearch, hugColumnWidths, menuVisible, setMenuVisible, dropdownVisible, setDropdownVisible, actionsKey = "actions", columnSearchOutside, locale, formatOptions, }) => {
44
+ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resizable = false, defaultSearchOperation, sortQueries, onSort, bulkSelect, allRowsSelected, someRowsSelected, toggleSelectAll, cellStyle, widthMode, rowHeight, headerRef, showMenu, headerBackground, headerTopBorder, headerBottomBorder, groupBy, setGroupBy, updateGridColumns, setGridColumns, headerDropdownIndex, widthUnits, textFilterLabel = "Text Filter", gridData, checkboxWrapper, onFilter, setUniqueSearch, uniqueSearch, hugColumnWidths, menuVisible, setMenuVisible, dropdownVisible, setDropdownVisible, actionsKey = "actions", columnSearchOutside, locale, formatOptions, }) => {
45
45
  const [menuPosition, setMenuPosition] = useState(null);
46
46
  const [searchOpsPosition, setSearchOpsPosition] = useState(null);
47
47
  const [headerColumns, setHeaderColumns] = useState([]);
@@ -509,7 +509,7 @@ const GridHeader = ({ startHoriIndex, endHoriIndex, columns, onSearch, searchQue
509
509
  .filter((column) => !groupByKeys.includes(column.key))
510
510
  .map((column, colIndex) => {
511
511
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
512
- if (!column.hidden && colIndex >= startHoriIndex && colIndex <= endHoriIndex) {
512
+ if (!column.hidden) {
513
513
  const columnData = getColumnData(column.key, gridData, (_a = column.dataType) !== null && _a !== void 0 ? _a : "string");
514
514
  return (_jsx("div", { className: `${sortable && column.sortable ? "sortable" : ""} ${column.showMenu ? "menu-true" : "menu-false"} column index-${column.key}`, style: Object.assign(Object.assign({}, cellStyle), { position: "relative", padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis", width: widthMode === "auto"
515
515
  ? "auto"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megha-ui/react",
3
- "version": "1.2.686",
3
+ "version": "1.2.688",
4
4
  "description": "A collection of reusable UI components for React applications, built with TypeScript.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",