How to use the react-table.ReactTableDefaults.column function in react-table

className="icon"
      onClick={showKernelSpec.bind(this, kernelSpec)}
      title="Show kernel spec"
      key={displayName + "kernelInfo"}
    >
      {displayName}
    
  );
};

// Set default properties of React-Table
Object.assign(ReactTableDefaults, {
  className: "kernel-monitor",
  showPagination: false
});
Object.assign(ReactTableDefaults.column, {
  className: "table-cell",
  headerClassName: "table-header",
  style: { textAlign: "center" }
});

const KernelMonitor = observer(({ store }: { store: store }) => {
  if (store.runningKernels.length === 0) {
    return (
      <ul>
        <li>No running kernels</li>
      </ul>
    );
  }

  const data = _.map(store.runningKernels, (kernel, key: number) =&gt; {
    return {

import React, { PureComponent } from 'react'

import ReactTable, { ReactTableDefaults } from 'react-table'

import 'react-table/react-table.css'
// $FlowFixMe
import './DataTable.scss'

import { Box } from 'grommet/components/Box'
import { Text } from 'grommet/components/Text'

import { GetDataEventOption } from '../../../model/NodeEditor'

// https://github.com/tannerlinsley/react-table/issues/730
const columnDefaults = { ...ReactTableDefaults.column, headerClassName: 'datatable-header' }

import type { PlainDataframe, NodeEditorContext } from '../../../../common/model/flowtypes.js'
import type { EventEmitter3 } from 'eventemitter3'

type Props = {
  uncontrolled: boolean,
  pagination: boolean,
  pageSize: number,
  context: NodeEditorContext,
  ee: EventEmitter3,

  caption: string,
  value: PlainDataframe,

  onChange: (any)=>void,
  onError: (title:string, level:string, error: Error)=>void,

class ReactTableFixedColumns extends React.Component {
    static propTypes = {
      columns: PropTypes.array.isRequired,
      innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
      className: PropTypes.string,
      onResizedChange: PropTypes.func,
      uniqClassName: PropTypes.string,
      column: PropTypes.object,
    }

    static defaultProps = {
      innerRef: null,
      className: null,
      onResizedChange: null,
      uniqClassName: null,
      column: ReactTableDefaults.column,
    }

    constructor(props) {
      super(props);

      checkErrors(this.props.columns);

      this.columnsWidth = {};
      this.uniqClassName = this.props.uniqClassName || uniqid('rthfc-');
    }

    componentDidMount() {
      this.updateRowsPosition();
    }

    componentDidUpdate() {

};
          }}
          getTdProps={(state, rowInfo, column) => {
            let className = 'white-space-wrap vertically-align-center';
            const incomingTdProps: any = getTdProps!(state, rowInfo, column);
            if (incomingTdProps && incomingTdProps.className) {
              className += ` ${incomingTdProps.className}`;
            }
            return {
              ...incomingTdProps,
              className,
            };
          }}
          showPagination={data.length > 0}
          column={{
            ...ReactTableDefaults.column,
            resizable: false,
            Expander: ({ isExpanded, ...rest }) => (
              
                {isExpanded ? (
                  
                ) : (
                  
                )}
              
            ),
          }}
          {...props}
        />
      
    );
  }

class ReactTableFixedColumns extends React.Component {
    static propTypes = {
      columns: PropTypes.array.isRequired,
      getProps: PropTypes.func,
      innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
      className: PropTypes.string,
      uniqClassName: PropTypes.string,
      column: PropTypes.object,
    }

    static defaultProps = {
      getProps: null,
      innerRef: null,
      className: null,
      uniqClassName: null,
      column: ReactTableDefaults.column,
    }

    constructor(props) {
      super(props);

      checkErrors(this.props.columns);

      this.uniqClassName = this.props.uniqClassName || uniqid('rthfc-');

      this.onChangePropertyList = {
        onResizedChange: this.onChangeProperty('onResizedChange'),
        onFilteredChange: this.onChangeProperty('onFilteredChange'),
        onPageChange: this.onChangeProperty('onPageChange'),
        onPageSizeChange: this.onChangeProperty('onPageSizeChange'),
        onExpandedChange: this.onChangeProperty('onExpandedChange'),
      };

render () {
    const customDefaults = {
      ...ReactTableDefaults.column
    };

    const columns = [{
      accessor: item => (item.groupId),
      className: 'col-groupId',
      Header: 'Group ID',
      id: 'groupId',
      minWidth: 25,
      show: false
    }, {
      accessor: (item) => {
        if (item.supplements !== null) {
          return '';
        }
        return (item.compliancePeriod ? item.compliancePeriod.description : '');
      },