@alaarab/ogrid-react-fluent 2.4.0 → 2.4.1
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.
- package/dist/esm/index.css +1 -6
- package/dist/esm/index.js +45 -12
- package/package.json +2 -2
package/dist/esm/index.css
CHANGED
|
@@ -1075,20 +1075,15 @@
|
|
|
1075
1075
|
text-align: center;
|
|
1076
1076
|
}
|
|
1077
1077
|
.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__rowNumberHeaderCellWrapper {
|
|
1078
|
-
width: 50px;
|
|
1079
|
-
min-width: 50px;
|
|
1080
|
-
max-width: 50px;
|
|
1081
1078
|
padding: 4px 8px;
|
|
1082
1079
|
text-align: center;
|
|
1083
1080
|
background: var(--ogrid-header-bg, #f5f5f5);
|
|
1084
1081
|
font-weight: 600;
|
|
1085
1082
|
color: var(--colorNeutralForeground3, #666);
|
|
1086
1083
|
border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
|
|
1084
|
+
position: relative;
|
|
1087
1085
|
}
|
|
1088
1086
|
.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__rowNumberCellWrapper {
|
|
1089
|
-
width: 50px;
|
|
1090
|
-
min-width: 50px;
|
|
1091
|
-
max-width: 50px;
|
|
1092
1087
|
padding: 4px 8px;
|
|
1093
1088
|
text-align: center;
|
|
1094
1089
|
background: var(--colorNeutralBackground3, #f5f5f5);
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import './index.css';
|
|
2
|
-
import { useColumnHeaderFilterState, getColumnHeaderFilterStateParams, DateFilterContent, renderFilterContent, areGridRowPropsEqual, PaginationControlsBase, createOGrid, useListVirtualizer, STOP_PROPAGATION, useDataGridTableOrchestration, useColumnMeta, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, POPOVER_ANCHOR_STYLE, resolveCellDisplayContent, resolveCellStyle, getCellInteractionProps, CURSOR_CELL_STYLE, CellErrorBoundary, GRID_ROOT_STYLE, PREVENT_DEFAULT, indexToColumnLetter, getHeaderFilterConfig, MarchingAntsOverlay, FormulaRefOverlay, NOOP, getColumnHeaderMenuProps, useColumnChooserState, ColumnChooserContent, BaseInlineCellEditor, partitionColumnsForVirtualization, BaseDropIndicator, BaseEmptyState, GridContextMenu as GridContextMenu$1, BaseColumnHeaderMenu, StatusBar as StatusBar$1, BaseLoadingOverlay } from '@alaarab/ogrid-react';
|
|
2
|
+
import { useColumnHeaderFilterState, getColumnHeaderFilterStateParams, DateFilterContent, renderFilterContent, areGridRowPropsEqual, PaginationControlsBase, createOGrid, useListVirtualizer, STOP_PROPAGATION, useDataGridTableOrchestration, useColumnMeta, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, POPOVER_ANCHOR_STYLE, resolveCellDisplayContent, resolveCellStyle, getCellInteractionProps, CURSOR_CELL_STYLE, CellErrorBoundary, GRID_ROOT_STYLE, PREVENT_DEFAULT, indexToColumnLetter, ROW_NUMBER_COLUMN_ID, ROW_NUMBER_COLUMN_WIDTH, getHeaderFilterConfig, MarchingAntsOverlay, FormulaRefOverlay, NOOP, getColumnHeaderMenuProps, useColumnChooserState, ColumnChooserContent, BaseInlineCellEditor, partitionColumnsForVirtualization, BaseDropIndicator, BaseEmptyState, GridContextMenu as GridContextMenu$1, BaseColumnHeaderMenu, StatusBar as StatusBar$1, BaseLoadingOverlay } from '@alaarab/ogrid-react';
|
|
3
3
|
export { BaseColumnHeaderMenu, BaseDropIndicator, BaseEmptyState, BaseInlineCellEditor, BaseLoadingOverlay, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, CURSOR_CELL_STYLE, CellErrorBoundary, DEFAULT_MIN_COLUMN_WIDTH, DateFilterContent, EmptyState, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GRID_ROOT_STYLE, GridContextMenu, MAX_PAGE_BUTTONS, MarchingAntsOverlay, NOOP, OGridLayout, PAGE_SIZE_OPTIONS, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, ROW_NUMBER_COLUMN_WIDTH, STOP_PROPAGATION, SideBar, StatusBar, UndoRedoStack, areGridRowPropsEqual, booleanParser, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, clampSelectionToBounds, computeAggregations, computeAutoScrollSpeed, computeTabNavigation, createOGrid, currencyParser, dateParser, deriveFilterOptionsFromData, editorInputStyle, editorWrapperStyle, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellInteractionProps, getCellRenderDescriptor, getCellValue, getColumnHeaderFilterStateParams, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getDateFilterContentProps, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getStatusBarParts, isInSelectionRange, isRowInRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, processClientSideData, rangesEqual, renderFilterContent, resolveCellDisplayContent, resolveCellStyle, richSelectDropdownStyle, richSelectNoMatchesStyle, richSelectOptionHighlightedStyle, richSelectOptionStyle, richSelectWrapperStyle, selectChevronStyle, selectDisplayStyle, selectEditorStyle, toUserLike, triggerCsvDownload, useActiveCell, useCellEditing, useCellSelection, useClipboard, useColumnChooserState, useColumnHeaderFilterState, useColumnMeta, useColumnReorder, useColumnResize, useContextMenu, useDataGridState, useDataGridTableOrchestration, useDateFilterState, useDebounce, useFillHandle, useFilterOptions, useInlineCellEditorState, useKeyboardNavigation, useLatestRef, useListVirtualizer, useMultiSelectFilterState, useOGrid, usePaginationControls, usePeopleFilterState, useRichSelectState, useRowSelection, useSelectState, useSideBarState, useTableLayout, useTextFilterState, useUndoRedo, useVirtualScroll } from '@alaarab/ogrid-react';
|
|
4
4
|
import * as React2 from 'react';
|
|
5
5
|
import { useCallback, useRef, useEffect } from 'react';
|
|
@@ -557,7 +557,8 @@ function GridRowInner(props) {
|
|
|
557
557
|
rowNumberOffset,
|
|
558
558
|
leftSpacerWidth,
|
|
559
559
|
rightSpacerWidth,
|
|
560
|
-
globalColIndexMap
|
|
560
|
+
globalColIndexMap,
|
|
561
|
+
rowNumWidth
|
|
561
562
|
} = props;
|
|
562
563
|
return /* @__PURE__ */ jsxs(
|
|
563
564
|
TableRow,
|
|
@@ -586,7 +587,7 @@ function GridRowInner(props) {
|
|
|
586
587
|
)
|
|
587
588
|
}
|
|
588
589
|
) }),
|
|
589
|
-
hasRowNumbersCol && /* @__PURE__ */ jsx(TableCell, { className: DataGridTable_module_default.rowNumberCellWrapper, children: /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.rowNumberCellInner, children: rowNumberOffset + rowIndex + 1 }) }),
|
|
590
|
+
hasRowNumbersCol && /* @__PURE__ */ jsx(TableCell, { className: DataGridTable_module_default.rowNumberCellWrapper, style: rowNumWidth ? { width: rowNumWidth, minWidth: rowNumWidth, maxWidth: rowNumWidth } : void 0, children: /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.rowNumberCellInner, children: rowNumberOffset + rowIndex + 1 }) }),
|
|
590
591
|
leftSpacerWidth != null && leftSpacerWidth > 0 && /* @__PURE__ */ jsx("td", { style: { ...SPACER_TD_STYLE, width: leftSpacerWidth, minWidth: leftSpacerWidth }, "aria-hidden": true }),
|
|
591
592
|
visibleCols.map((col, colIdx) => {
|
|
592
593
|
const globalIdx = globalColIndexMap ? globalColIndexMap[colIdx] : colIdx;
|
|
@@ -630,7 +631,8 @@ function FluentTableBody(props) {
|
|
|
630
631
|
copyRange,
|
|
631
632
|
isDragging,
|
|
632
633
|
editingCell,
|
|
633
|
-
pinnedColumns
|
|
634
|
+
pinnedColumns,
|
|
635
|
+
rowNumWidth
|
|
634
636
|
} = props;
|
|
635
637
|
const partition = React2.useMemo(() => {
|
|
636
638
|
if (!columnRange) return null;
|
|
@@ -680,7 +682,8 @@ function FluentTableBody(props) {
|
|
|
680
682
|
editingRowId: editingCell?.rowId ?? null,
|
|
681
683
|
leftSpacerWidth,
|
|
682
684
|
rightSpacerWidth,
|
|
683
|
-
globalColIndexMap
|
|
685
|
+
globalColIndexMap,
|
|
686
|
+
rowNumWidth
|
|
684
687
|
},
|
|
685
688
|
rowIdStr
|
|
686
689
|
);
|
|
@@ -822,9 +825,14 @@ function DataGridTableInner(props) {
|
|
|
822
825
|
)
|
|
823
826
|
] });
|
|
824
827
|
} else {
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
+
let displayNode;
|
|
829
|
+
if (descriptor.columnType === "boolean") {
|
|
830
|
+
displayNode = /* @__PURE__ */ jsx("input", { type: "checkbox", checked: !!descriptor.displayValue, disabled: true, style: { margin: 0, pointerEvents: "none" }, "aria-label": descriptor.displayValue ? "True" : "False" });
|
|
831
|
+
} else {
|
|
832
|
+
const displayContent = resolveCellDisplayContent(col, item, descriptor.displayValue);
|
|
833
|
+
const cellStyle = resolveCellStyle(col, item, descriptor.displayValue);
|
|
834
|
+
displayNode = cellStyle ? /* @__PURE__ */ jsx("span", { style: cellStyle, children: displayContent }) : displayContent;
|
|
835
|
+
}
|
|
828
836
|
const cellClassNames = `${DataGridTable_module_default.cellContent}${descriptor.isActive ? ` ${DataGridTable_module_default.activeCellContent}` : ""}${descriptor.isActive && descriptor.isInRange ? ` ${DataGridTable_module_default.inRange}` : ""}${descriptor.isInRange && !descriptor.isActive ? ` ${DataGridTable_module_default.cellInRange}` : ""}${descriptor.isInCutRange ? ` ${DataGridTable_module_default.cellCut}` : ""}${descriptor.isInCopyRange ? ` ${DataGridTable_module_default.cellCopied}` : ""}`;
|
|
829
837
|
const interactionProps = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
|
|
830
838
|
content = /* @__PURE__ */ jsxs(
|
|
@@ -834,7 +842,7 @@ function DataGridTableInner(props) {
|
|
|
834
842
|
...interactionProps,
|
|
835
843
|
style: descriptor.canEditAny ? CURSOR_CELL_STYLE : void 0,
|
|
836
844
|
children: [
|
|
837
|
-
|
|
845
|
+
displayNode,
|
|
838
846
|
descriptor.canEditAny && descriptor.isSelectionEndCell && /* @__PURE__ */ jsx(
|
|
839
847
|
"div",
|
|
840
848
|
{
|
|
@@ -912,7 +920,27 @@ function DataGridTableInner(props) {
|
|
|
912
920
|
}
|
|
913
921
|
) }) }, "__selection__"),
|
|
914
922
|
rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx("th", { rowSpan: headerRows.length - 1 }, "__selection_placeholder__"),
|
|
915
|
-
rowIdx === headerRows.length - 1 && hasRowNumbersCol &&
|
|
923
|
+
rowIdx === headerRows.length - 1 && hasRowNumbersCol && (() => {
|
|
924
|
+
const rowNumW = columnSizingOverrides?.[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH;
|
|
925
|
+
return /* @__PURE__ */ jsxs(TableHeaderCell, { className: DataGridTable_module_default.rowNumberHeaderCellWrapper, style: { width: rowNumW, minWidth: rowNumW, maxWidth: rowNumW }, children: [
|
|
926
|
+
/* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.rowNumberHeaderCellInner, children: "#" }),
|
|
927
|
+
/* @__PURE__ */ jsx(
|
|
928
|
+
"div",
|
|
929
|
+
{
|
|
930
|
+
className: DataGridTable_module_default.resizeHandle,
|
|
931
|
+
role: "separator",
|
|
932
|
+
"aria-orientation": "vertical",
|
|
933
|
+
"aria-label": "Resize row number column",
|
|
934
|
+
onMouseDown: (e) => {
|
|
935
|
+
setActiveCell(null);
|
|
936
|
+
interaction.setSelectionRange(null);
|
|
937
|
+
wrapperRef.current?.focus({ preventScroll: true });
|
|
938
|
+
handleResizeStart(e, { columnId: ROW_NUMBER_COLUMN_ID, name: "#" });
|
|
939
|
+
}
|
|
940
|
+
}
|
|
941
|
+
)
|
|
942
|
+
] }, "__row_number__");
|
|
943
|
+
})(),
|
|
916
944
|
rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx("th", { rowSpan: headerRows.length - 1 }, "__row_number_placeholder__"),
|
|
917
945
|
row.map((cell, cellIdx) => {
|
|
918
946
|
if (cell.isGroup) {
|
|
@@ -943,7 +971,11 @@ function DataGridTableInner(props) {
|
|
|
943
971
|
className: DataGridTable_module_default.headerMenuTrigger,
|
|
944
972
|
onClick: (e) => {
|
|
945
973
|
e.stopPropagation();
|
|
946
|
-
headerMenu.
|
|
974
|
+
if (headerMenu.isOpen && headerMenu.openForColumn === col.columnId) {
|
|
975
|
+
headerMenu.close();
|
|
976
|
+
} else {
|
|
977
|
+
headerMenu.open(col.columnId, e.currentTarget);
|
|
978
|
+
}
|
|
947
979
|
},
|
|
948
980
|
"aria-label": "Column options",
|
|
949
981
|
title: "Column options",
|
|
@@ -1000,7 +1032,8 @@ function DataGridTableInner(props) {
|
|
|
1000
1032
|
copyRange,
|
|
1001
1033
|
isDragging,
|
|
1002
1034
|
editingCell,
|
|
1003
|
-
pinnedColumns: pinning.pinnedColumns
|
|
1035
|
+
pinnedColumns: pinning.pinnedColumns,
|
|
1036
|
+
rowNumWidth: hasRowNumbersCol ? columnSizingOverrides?.[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH : void 0
|
|
1004
1037
|
}
|
|
1005
1038
|
)
|
|
1006
1039
|
] }),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alaarab/ogrid-react-fluent",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.1",
|
|
4
4
|
"description": "OGrid React Fluent implementation – DataGrid-powered data table with sorting, filtering, pagination, column chooser, and CSV export.",
|
|
5
5
|
"main": "dist/esm/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"node": ">=18"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@alaarab/ogrid-react": "2.4.
|
|
44
|
+
"@alaarab/ogrid-react": "2.4.1"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@fluentui/react-components": "^9.0.0",
|