Skip to content

Commit 6ce66a4

Browse files
committed
Add CalculatedColumn.cellStyle and RowRendererProps.rowStyle attributes
These two attributes allow for CSSProperties (JSX style) to be directly passed to the table instead of through a class name. Signed-off-by: Gegham Zakaryan <[email protected]>
1 parent 3e871fa commit 6ce66a4

File tree

9 files changed

+41
-15
lines changed

9 files changed

+41
-15
lines changed

README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,10 @@ function MyGrid() {
234234

235235
###### `rowClass?: Maybe<(row: R) => Maybe<string>>`
236236

237+
###### `rowStyle?: Maybe<(row: R) => Maybe<CSSProperties>>`
238+
239+
This property sets the passed JSX style to the row.
240+
237241
##### `direction?: Maybe<'ltr' | 'rtl'>`
238242

239243
This property sets the text direction of the grid, it defaults to `'ltr'` (left-to-right). Setting `direction` to `'rtl'` has the following effects:

src/Cell.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function Cell<R, SR>({
3737
}: CellRendererProps<R, SR>) {
3838
const { ref, tabIndex, onFocus } = useRovingCellRef(isCellSelected);
3939

40-
const { cellClass } = column;
40+
const { cellClass, cellStyle } = column;
4141
const className = getCellClassname(
4242
column,
4343
{
@@ -46,6 +46,7 @@ function Cell<R, SR>({
4646
},
4747
typeof cellClass === 'function' ? cellClass(row) : cellClass
4848
);
49+
const style = typeof cellStyle === 'function' ? cellStyle(row) : cellStyle;
4950

5051
function selectCellWrapper(openEditor?: boolean | null) {
5152
selectCell(row, column, openEditor);
@@ -79,7 +80,7 @@ function Cell<R, SR>({
7980
ref={ref}
8081
tabIndex={tabIndex}
8182
className={className}
82-
style={getCellStyle(column, colSpan)}
83+
style={getCellStyle(column, colSpan, style)}
8384
onClick={handleClick}
8485
onDoubleClick={handleDoubleClick}
8586
onContextMenu={handleContextMenu}

src/DataGrid.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { forwardRef, useState, useRef, useImperativeHandle, useCallback, useMemo } from 'react';
2-
import type { Key, RefAttributes } from 'react';
2+
import type { Key, RefAttributes, CSSProperties } from 'react';
33
import clsx from 'clsx';
44

55
import {
@@ -175,6 +175,7 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
175175
*/
176176
renderers?: Maybe<Renderers<R, SR>>;
177177
rowClass?: Maybe<(row: R) => Maybe<string>>;
178+
rowStyle?: Maybe<CSSProperties | ((row: R) => Maybe<CSSProperties>)>;
178179
direction?: Maybe<Direction>;
179180
'data-testid'?: Maybe<string>;
180181
}
@@ -224,6 +225,7 @@ function DataGrid<R, SR, K extends Key>(
224225
className,
225226
style,
226227
rowClass,
228+
rowStyle,
227229
direction,
228230
// ARIA
229231
'aria-label': ariaLabel,
@@ -1070,6 +1072,7 @@ function DataGrid<R, SR, K extends Key>(
10701072
onRowClick,
10711073
onRowDoubleClick,
10721074
rowClass,
1075+
rowStyle,
10731076
gridRowStart,
10741077
height: getRowHeight(rowIdx),
10751078
copiedCellIdx:

src/EditCell.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,13 +95,14 @@ export default function EditCell<R, SR>({
9595
}
9696
}
9797

98-
const { cellClass } = column;
98+
const { cellClass, cellStyle } = column;
9999
const className = getCellClassname(
100100
column,
101101
'rdg-editor-container',
102102
!column.editorOptions?.renderFormatter && cellEditing,
103103
typeof cellClass === 'function' ? cellClass(row) : cellClass
104104
);
105+
const style = typeof cellStyle === 'function' ? cellStyle(row) : cellStyle;
105106

106107
return (
107108
<div
@@ -110,7 +111,7 @@ export default function EditCell<R, SR>({
110111
aria-colspan={colSpan}
111112
aria-selected
112113
className={className}
113-
style={getCellStyle(column, colSpan)}
114+
style={getCellStyle(column, colSpan, style)}
114115
onKeyDown={onKeyDown}
115116
onMouseDownCapture={commitOnOutsideClick ? cancelFrameRequest : undefined}
116117
>

src/HeaderCell.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ export default function HeaderCell<R, SR>({
174174
tabIndex={shouldFocusGrid ? 0 : tabIndex}
175175
className={className}
176176
style={{
177-
...getCellStyle(column, colSpan),
177+
...getCellStyle(column, colSpan, column.headerCellStyle),
178178
minWidth: column.minWidth,
179179
maxWidth: column.maxWidth ?? undefined
180180
}}

src/Row.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ function Row<R, SR>(
2626
onRowClick,
2727
onRowDoubleClick,
2828
rowClass,
29+
rowStyle,
2930
setDraggedOverRowIdx,
3031
onMouseEnter,
3132
onRowChange,
@@ -53,6 +54,8 @@ function Row<R, SR>(
5354
className
5455
);
5556

57+
rowStyle = typeof rowStyle === 'function' ? rowStyle(row) : rowStyle;
58+
5659
const cells = [];
5760

5861
for (let index = 0; index < viewportColumns.length; index++) {
@@ -94,7 +97,7 @@ function Row<R, SR>(
9497
ref={ref}
9598
className={className}
9699
onMouseEnter={handleDragEnter}
97-
style={getRowStyle(gridRowStart, height)}
100+
style={getRowStyle(gridRowStart, height, rowStyle)}
98101
{...props}
99102
>
100103
{cells}

src/SummaryCell.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,13 @@ function SummaryCell<R, SR>({
2727
selectCell
2828
}: SummaryCellProps<R, SR>) {
2929
const { ref, tabIndex, onFocus } = useRovingCellRef(isCellSelected);
30-
const { summaryCellClass } = column;
30+
const { summaryCellClass, summaryCellStyle } = column;
3131
const className = getCellClassname(
3232
column,
3333
summaryCellClassname,
3434
typeof summaryCellClass === 'function' ? summaryCellClass(row) : summaryCellClass
3535
);
36+
const style = typeof summaryCellStyle === 'function' ? summaryCellStyle(row) : summaryCellStyle;
3637

3738
function onClick() {
3839
selectCell(row, column);
@@ -47,7 +48,7 @@ function SummaryCell<R, SR>({
4748
ref={ref}
4849
tabIndex={tabIndex}
4950
className={className}
50-
style={getCellStyle(column, colSpan)}
51+
style={getCellStyle(column, colSpan, style)}
5152
onClick={onClick}
5253
onFocus={onFocus}
5354
>

src/types.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Key, ReactElement, ReactNode, RefObject } from 'react';
1+
import type { Key, ReactElement, ReactNode, RefObject, CSSProperties } from 'react';
22

33
export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
44

@@ -15,9 +15,14 @@ export interface Column<TRow, TSummaryRow = unknown> {
1515
readonly minWidth?: Maybe<number>;
1616
/** Maximum column width in px. */
1717
readonly maxWidth?: Maybe<number>;
18+
/** Standard, header and summary cell style */
1819
readonly cellClass?: Maybe<string | ((row: TRow) => Maybe<string>)>;
1920
readonly headerCellClass?: Maybe<string>;
2021
readonly summaryCellClass?: Maybe<string | ((row: TSummaryRow) => Maybe<string>)>;
22+
/** Standard, header and summary cell style */
23+
readonly cellStyle?: Maybe<CSSProperties | ((row: TRow) => Maybe<CSSProperties>)>;
24+
readonly headerCellStyle?: Maybe<CSSProperties>;
25+
readonly summaryCellStyle?: Maybe<CSSProperties | ((row: TSummaryRow) => Maybe<CSSProperties>)>;
2126
/** Formatter to be used to render the cell content */
2227
readonly formatter?: Maybe<(props: FormatterProps<TRow, TSummaryRow>) => ReactNode>;
2328
/** Formatter to be used to render the summary cell content */
@@ -143,6 +148,7 @@ export interface RowRendererProps<TRow, TSummaryRow = unknown>
143148
onRowClick: Maybe<(row: TRow, column: CalculatedColumn<TRow, TSummaryRow>) => void>;
144149
onRowDoubleClick: Maybe<(row: TRow, column: CalculatedColumn<TRow, TSummaryRow>) => void>;
145150
rowClass: Maybe<(row: TRow) => Maybe<string>>;
151+
rowStyle: Maybe<CSSProperties | ((row: TRow) => Maybe<CSSProperties>)>;
146152
setDraggedOverRowIdx: ((overRowIdx: number) => void) | undefined;
147153
selectCell: (
148154
row: TRow,

src/utils/styleUtils.ts

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,34 @@
11
import type { CSSProperties } from 'react';
22
import clsx from 'clsx';
33

4-
import type { CalculatedColumn } from '../types';
4+
import type { Maybe, CalculatedColumn } from '../types';
55
import { cellClassname, cellFrozenClassname, cellFrozenLastClassname } from '../style';
66

7-
export function getRowStyle(rowIdx: number, height?: number): CSSProperties {
7+
export function getRowStyle(
8+
rowIdx: number,
9+
height?: number,
10+
extraStyles?: Maybe<CSSProperties>
11+
): CSSProperties {
812
if (height !== undefined) {
913
return {
1014
'--rdg-grid-row-start': rowIdx,
11-
'--rdg-row-height': `${height}px`
15+
'--rdg-row-height': `${height}px`,
16+
...extraStyles
1217
} as unknown as CSSProperties;
1318
}
1419
return { '--rdg-grid-row-start': rowIdx } as unknown as CSSProperties;
1520
}
1621

1722
export function getCellStyle<R, SR>(
1823
column: CalculatedColumn<R, SR>,
19-
colSpan?: number
24+
colSpan?: number,
25+
extraStyles?: Maybe<CSSProperties>
2026
): React.CSSProperties {
2127
return {
2228
gridColumnStart: column.idx + 1,
2329
gridColumnEnd: colSpan !== undefined ? `span ${colSpan}` : undefined,
24-
insetInlineStart: column.frozen ? `var(--rdg-frozen-left-${column.idx})` : undefined
30+
insetInlineStart: column.frozen ? `var(--rdg-frozen-left-${column.idx})` : undefined,
31+
...extraStyles
2532
};
2633
}
2734

0 commit comments

Comments
 (0)