@alaarab/ogrid-react-fluent 2.4.0 → 2.4.2
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 +5 -6
- package/dist/esm/index.js +45 -12
- package/package.json +2 -2
package/dist/esm/index.css
CHANGED
|
@@ -198,6 +198,10 @@
|
|
|
198
198
|
}
|
|
199
199
|
.ogrid-fluent__ColumnHeaderFilter-module__popoverOption {
|
|
200
200
|
padding: 4px 12px;
|
|
201
|
+
font-size: 13px;
|
|
202
|
+
display: flex;
|
|
203
|
+
align-items: center;
|
|
204
|
+
gap: 8px;
|
|
201
205
|
transition: background-color 0.1s ease;
|
|
202
206
|
cursor: pointer;
|
|
203
207
|
}
|
|
@@ -1075,20 +1079,15 @@
|
|
|
1075
1079
|
text-align: center;
|
|
1076
1080
|
}
|
|
1077
1081
|
.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__rowNumberHeaderCellWrapper {
|
|
1078
|
-
width: 50px;
|
|
1079
|
-
min-width: 50px;
|
|
1080
|
-
max-width: 50px;
|
|
1081
1082
|
padding: 4px 8px;
|
|
1082
1083
|
text-align: center;
|
|
1083
1084
|
background: var(--ogrid-header-bg, #f5f5f5);
|
|
1084
1085
|
font-weight: 600;
|
|
1085
1086
|
color: var(--colorNeutralForeground3, #666);
|
|
1086
1087
|
border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
|
|
1088
|
+
position: relative;
|
|
1087
1089
|
}
|
|
1088
1090
|
.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__rowNumberCellWrapper {
|
|
1089
|
-
width: 50px;
|
|
1090
|
-
min-width: 50px;
|
|
1091
|
-
max-width: 50px;
|
|
1092
1091
|
padding: 4px 8px;
|
|
1093
1092
|
text-align: center;
|
|
1094
1093
|
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.2",
|
|
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.2"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@fluentui/react-components": "^9.0.0",
|