Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: React 19 fixes for Table related components #1855

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fix: React 19 fixes for Table related components #1855

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
980b9c9
feat: Add support for React 19 for Table related components
artur-ptaszek-mck Nov 8, 2024
e3558cc
fixup! feat: Add support for React 19 for Table related components
artur-ptaszek-mck Nov 8, 2024
eb7b1e4
fixup! fixup! feat: Add support for React 19 for Table related compon…
artur-ptaszek-mck Nov 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions source/Grid/Grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,9 @@ type Props = {

/** Width of Grid; this property determines the number of visible (vs virtualized) columns. */
width: number,

/** Reference to DOM element */
elRef?: React.Ref<React.ElementType>,
};

type InstanceProps = {
Expand Down Expand Up @@ -1382,6 +1385,12 @@ class Grid extends React.PureComponent<Props, State> {

_setScrollingContainerRef = (ref: Element) => {
this._scrollingContainer = ref;

if (typeof this.props.elRef === 'function') {
this.props.elRef(ref);
} else if (typeof this.props.elRef === 'object') {
this.props.elRef.current = ref;
}
};

/**
Expand Down
23 changes: 14 additions & 9 deletions source/Table/Table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,13 @@ import clsx from 'clsx';
import Column from './Column';
import PropTypes from 'prop-types';
import * as React from 'react';
import {findDOMNode} from 'react-dom';
import Grid, {accessibilityOverscanIndicesGetter} from '../Grid';

import defaultRowRenderer from './defaultRowRenderer';
import defaultHeaderRowRenderer from './defaultHeaderRowRenderer';
import SortDirection from './SortDirection';
import defaultCellDataGetter from './defaultCellDataGetter';
import defaultCellRenderer from './defaultCellRenderer';

/**
* Table component with fixed headers and virtualized rows for improved performance with large data sets.
Expand Down Expand Up @@ -263,6 +264,7 @@ export default class Table extends React.PureComponent {
this._onScroll = this._onScroll.bind(this);
this._onSectionRendered = this._onSectionRendered.bind(this);
this._setRef = this._setRef.bind(this);
this._gridElementRef = React.createRef();
}

forceUpdateGrid() {
Expand Down Expand Up @@ -338,8 +340,8 @@ export default class Table extends React.PureComponent {
}

getScrollbarWidth() {
if (this.Grid) {
const Grid = findDOMNode(this.Grid);
if (this._gridElementRef.current) {
const Grid = this._gridElementRef.current;
const clientWidth = Grid.clientWidth || 0;
const offsetWidth = Grid.offsetWidth || 0;
return offsetWidth - clientWidth;
Expand Down Expand Up @@ -390,7 +392,7 @@ export default class Table extends React.PureComponent {
React.Children.toArray(children).forEach((column, index) => {
const flexStyles = this._getFlexStyleForColumn(
column,
column.props.style,
column.props.style ?? Column.defaultProps.style,
);

this._cachedColumnStyles[index] = {
Expand Down Expand Up @@ -427,6 +429,7 @@ export default class Table extends React.PureComponent {

<Grid
{...this.props}
elRef={this._gridElementRef}
aria-readonly={null}
autoContainerWidth
className={clsx('ReactVirtualized__Table__Grid', gridClassName)}
Expand Down Expand Up @@ -454,8 +457,8 @@ export default class Table extends React.PureComponent {
_createColumn({column, columnIndex, isScrolling, parent, rowData, rowIndex}) {
const {onColumnClick} = this.props;
const {
cellDataGetter,
cellRenderer,
cellDataGetter = defaultCellDataGetter,
cellRenderer = defaultCellRenderer,
className,
columnData,
dataKey,
Expand Down Expand Up @@ -512,9 +515,9 @@ export default class Table extends React.PureComponent {
const {
columnData,
dataKey,
defaultSortDirection,
defaultSortDirection = Column.defaultProps.defaultSortDirection,
disableSort,
headerRenderer,
headerRenderer = Column.defaultProps.headerRenderer,
id,
label,
} = column.props;
Expand Down Expand Up @@ -673,7 +676,9 @@ export default class Table extends React.PureComponent {
* Determines the flex-shrink, flex-grow, and width values for a cell (header or column).
*/
_getFlexStyleForColumn(column, customStyle = {}) {
const flexValue = `${column.props.flexGrow} ${column.props.flexShrink} ${column.props.width}px`;
const flexValue = `${column.props.flexGrow ??
Column.defaultProps.flexGrow} ${column.props.flexShrink ??
Column.defaultProps.flexShrink} ${column.props.width}px`;

const style = {
...customStyle,
Expand Down