@xcelsior/ui-spreadsheets 1.1.19 → 1.2.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.
Files changed (7) hide show
  1. package/dist/index.js +26 -11
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +26 -11
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/RowIndexColumnHeader.tsx +26 -6
  7. package/src/components/Spreadsheet.tsx +11 -17
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xcelsior/ui-spreadsheets",
3
- "version": "1.1.19",
3
+ "version": "1.2.1",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "dependencies": {
package/src/components/RowIndexColumnHeader.tsx CHANGED
@@ -16,8 +16,8 @@ export interface RowIndexColumnHeaderProps {
16
16
  onHighlightClick?: () => void;
17
17
  /** Callback when pin button is clicked */
18
18
  onPinClick?: () => void;
19
- /** Whether this is in the column groups row (needs rowSpan=2) */
20
- hasColumnGroups?: boolean;
19
+ /** Whether this is the empty placeholder cell in the second header row (column headers row) */
20
+ isSecondRow?: boolean;
21
21
  /** Whether compact mode is enabled */
22
22
  compactMode?: boolean;
23
23
  /** Additional className */
@@ -34,12 +34,35 @@ export function RowIndexColumnHeader({
34
34
  isPinned = false,
35
35
  onHighlightClick,
36
36
  onPinClick,
37
- hasColumnGroups = false,
37
+ isSecondRow = false,
38
38
  compactMode = false,
39
39
  className,
40
40
  }: RowIndexColumnHeaderProps) {
41
41
  const cellPadding = compactMode ? cellPaddingCompact : cellPaddingNormal;
42
42
 
43
+ // Second row is an empty placeholder cell - no content, just maintains alignment
44
+ if (isSecondRow) {
45
+ return (
46
+ <th
47
+ className={cn(
48
+ 'border border-gray-200 text-center font-bold text-gray-700',
49
+ compactMode ? 'text-[10px]' : 'text-xs',
50
+ cellPadding,
51
+ isPinned ? 'z-30' : 'z-20',
52
+ className
53
+ )}
54
+ style={{
55
+ minWidth: `${ROW_INDEX_COLUMN_WIDTH}px`,
56
+ width: `${ROW_INDEX_COLUMN_WIDTH}px`,
57
+ position: 'sticky',
58
+ top: 0,
59
+ left: isPinned ? 0 : undefined,
60
+ backgroundColor: highlightColor || 'rgb(243 244 246)',
61
+ }}
62
+ />
63
+ );
64
+ }
65
+
43
66
  return (
44
67
  <th
45
68
  className={cn(
@@ -49,7 +72,6 @@ export function RowIndexColumnHeader({
49
72
  isPinned ? 'z-30' : 'z-20',
50
73
  className
51
74
  )}
52
- rowSpan={hasColumnGroups ? 2 : undefined}
53
75
  style={{
54
76
  minWidth: `${ROW_INDEX_COLUMN_WIDTH}px`,
55
77
  width: `${ROW_INDEX_COLUMN_WIDTH}px`,
@@ -57,8 +79,6 @@ export function RowIndexColumnHeader({
57
79
  top: 0,
58
80
  left: isPinned ? 0 : undefined,
59
81
  backgroundColor: highlightColor || 'rgb(243 244 246)',
60
- overflow: 'hidden',
61
- verticalAlign: 'middle',
62
82
  }}
63
83
  >
64
84
  <div className="flex items-center justify-center gap-1">
package/src/components/Spreadsheet.tsx CHANGED
@@ -896,14 +896,11 @@ export function Spreadsheet<T extends Record<string, any>>({
896
896
  {/* Column Group Headers */}
897
897
  {columnGroups && groupHeaderItems && (
898
898
  <tr>
899
- {/* Row index column header (rowSpan=2 for groups) */}
899
+ {/* Row index column header - empty placeholder in group row */}
900
900
  <RowIndexColumnHeader
901
- enableHighlighting={enableHighlighting}
902
901
  highlightColor={rowIndexHighlightColor}
903
902
  isPinned={isRowIndexPinned}
904
- onHighlightClick={handleRowIndexHighlightClick}
905
- onPinClick={() => handleTogglePin(ROW_INDEX_COLUMN_ID)}
906
- hasColumnGroups={true}
903
+ isSecondRow={true}
907
904
  compactMode={effectiveCompactMode}
908
905
  />
909
906
  {groupHeaderItems.map((item) => {
@@ -974,18 +971,15 @@ export function Spreadsheet<T extends Record<string, any>>({
974
971
 
975
972
  {/* Column Headers */}
976
973
  <tr>
977
- {/* Row index column header (when no groups) */}
978
- {!columnGroups && (
979
- <RowIndexColumnHeader
980
- enableHighlighting={enableHighlighting}
981
- highlightColor={rowIndexHighlightColor}
982
- isPinned={isRowIndexPinned}
983
- onHighlightClick={handleRowIndexHighlightClick}
984
- onPinClick={() => handleTogglePin(ROW_INDEX_COLUMN_ID)}
985
- hasColumnGroups={false}
986
- compactMode={effectiveCompactMode}
987
- />
988
- )}
974
+ {/* Row index column header - show full header in column headers row */}
975
+ <RowIndexColumnHeader
976
+ enableHighlighting={enableHighlighting}
977
+ highlightColor={rowIndexHighlightColor}
978
+ isPinned={isRowIndexPinned}
979
+ onHighlightClick={handleRowIndexHighlightClick}
980
+ onPinClick={() => handleTogglePin(ROW_INDEX_COLUMN_ID)}
981
+ compactMode={effectiveCompactMode}
982
+ />
989
983
  {columnRenderItems.map((item) => {
990
984
  if (item.type === 'collapsed-placeholder') {
991
985
  return (