react-base-table

Because BaseTable uses virtualization with overflow: hidden on rows and cells, editing content that is larger than the cell area will be clipped if rendered directly inside the cell.

To implement inline editing correctly, use a Portal (such as Overlay from react-overlays) to render the editing UI outside of the cell's DOM hierarchy. Most custom renderers in BaseTable provide a container prop, which refers to the table itself and should be used as the target container for your portal to ensure the editing UI is not constrained by cell boundaries.

import { Overlay } from 'react-overlays';

// Inside your custom CellRenderer component:
const { container, rowIndex, columnIndex } = this.props;

// ...
{editing && this.targetRef && (
  <Overlay 
    show 
    flip 
    rootClose 
    container={container} 
    target={this.getTargetRef} 
    onHide={this.handleHide}
  >
    {({ props, placement }) => (
      <div {...props} style={{ ...props.style, width: this.targetRef.offsetWidth }}>
        {/* Your Editor Component (e.g., Input, Select) */}
      </div>
    )}
  </Overlay>
)}

The simplest way to style BaseTable is to override its default SCSS variables. You can set a $table-prefix to avoid collisions and then import the base styles.

// override default variables for BaseTable
$table-prefix: AdvanceTable;

$table-font-size: 13px;
$table-padding-left: 15px;
$table-padding-right: 15px;
$column-padding: 7.5px;
...
$show-frozen-rows-shadow: false;
$show-frozen-columns-shadow: true;

@import 'react-base-table/dist/esm/_BaseTable.scss';

.#{$table-prefix} {
  // Custom overrides
}

// override default variables for BaseTable
$table-prefix: AdvanceTable;

$table-font-size: 13px;
$table-padding-left: 15px;
$table-padding-right: 15px;
$column-padding: 7.5px;
...
$show-frozen-rows-shadow: false;
$show-frozen-columns-shadow: true;

@import 'react-base-table/dist/esm/_BaseTable.scss';

.#{$table-prefix} {
  &:not(.#{$table-prefix}--show-left-shadow) {
    .#{$table-prefix}__table-frozen-left {
      box-shadow: none;
    }
  }

  &:not(.#{$table-prefix}--show-right-shadow) {
    .#{$table-prefix}__table-frozen-right {
      box-shadow: none;
    }
  }

  ...
}

Since selection is not a built-in feature, you can implement it by creating a wrapper component (e.g., SelectableTable) that manages selectedRowKeys in its internal state.

To implement selection, follow these steps:

1. Manage State: Maintain an array of selectedRowKeys in your component state. If the table is uncontrolled, use defaultSelectedRowKeys to initialize it.
2. Create a Selection Column: Add a special column at the beginning of your columns array. This column should use a custom cellRenderer (like a checkbox) that calls an onChange handler.
3. Handle Changes: In the onChange handler, update the selectedRowKeys state by adding or removing the row's key based on the interaction.
4. Visual Feedback: Use the rowClassName prop to apply a CSS class (e.g., .row-selected) to rows whose keys are present in selectedRowKeys.
5. Cleanup: Use a method like removeRowKeysFromState to purge keys from the internal state when rows are deleted to prevent stale selection data.

const StyledTable = styled(BaseTable)`
  .row-selected {
    background-color: #e3e3e3;
  }
`;

class SelectionCell extends React.PureComponent {
  _handleChange = e => {
    const { rowData, rowIndex, column } = this.props;
    const { onChange } = column;

    onChange({ selected: e.target.checked, rowData, rowIndex });
  };

  render() {
    const { rowData, column } = this.props;
    const { selectedRowKeys, rowKey } = column;
    const checked = selectedRowKeys.includes(rowData[rowKey]);

    return <input type="checkbox" checked={checked} onChange={this._handleChange} />;
  }
}

class SelectableTable extends React.PureComponent {
  // ... implementation details for managing selectedRowKeys and rowClassName ...

  render() {
    const { columns, children, selectable, selectionColumnProps, ...rest } = this.props;
    const { selectedRowKeys } = this.state;

    let _columns = columns || normalizeColumns(children);
    if (selectable) {
      const selectionColumn = {
        width: 40,
        flexShrink: 0,
        resizable: false,
        frozen: Column.FrozenDirection.LEFT,
        cellRenderer: SelectionCell,
        ...selectionColumnProps,
        key: '__selection__',
        rowKey: this.props.rowKey,
        selectedRowKeys: selectedRowKeys,
        onChange: this._handleSelectChange,
      };
      _columns = [selectionColumn, ..._columns];
    }

    return <StyledTable {...rest} columns={_columns} rowClassName={this._rowClassName} />;
  }
}