old_contents: // @flow
  
  // $FlowFixMe
  import React, { forwardRef } from 'react';
  import { connect } from 'react-redux';
  
  import IdHeaderField from './IdHeaderField';
  import ColumneHeader from './ColumnHeader';
  import Flex from '../Flex';
  
  import { setSelectedRows, setUpdatingRow } from '../../actions';
  import {
  	getVisibleColumns,
  	getNestedVisibleColumns,
  } from '../../reducers/mappings';
  import { getIsShowingNestedColumns } from '../../reducers/nestedColumns';
  
  type Props = {
  	visibleColumns: string[],
  	nestedVisibleColumns: string[],
  	isShowingNestedColumns: boolean,
  	headerRef: any,
  };
  
  const DataTableHeader = ({
  	visibleColumns,
  	isShowingNestedColumns,
  	nestedVisibleColumns,
  	headerRef,
  }: Props) => {
  	const mappingCols = isShowingNestedColumns
  		? nestedVisibleColumns
  		: visibleColumns;
  	const columns = ['_id', ...mappingCols];
  
  	if (columns.length >= 1) {
  		return (
  			<Flex
  				wrap="nowrap"
  				css={{
  					zIndex: 100,
  					position: 'relative',
  					overflow: 'hidden',
  				}}
  				innerRef={headerRef}
  			>
  				{columns.map(
  					col =>
  						col === '_id' ? (
  							<IdHeaderField key={col} />
  						) : (
  							<ColumneHeader col={col} key={col} />
  						),
  				)}
  			</Flex>
  		);
  	}
  	return null;
  };
  
  const mapStateToProps = state => ({
  	visibleColumns: getVisibleColumns(state),
  	nestedVisibleColumns: getNestedVisibleColumns(state),
  	isShowingNestedColumns: getIsShowingNestedColumns(state),
  });
  
  const mapDispatchToProps = {
  	onSelectedRows: setSelectedRows,
  	onSetUpdatingRow: setUpdatingRow,
  };
  
  const DataTableContainer = connect(
  	mapStateToProps,
  	mapDispatchToProps,
  )(DataTableHeader);
  
  export default forwardRef((props, ref) => (
  	<DataTableContainer {...props} headerRef={ref} />
  ));
  
new_contents: // @flow
  
  // $FlowFixMe
  import React, { forwardRef } from 'react';
  import { connect } from 'react-redux';
  
  import IdHeaderField from './IdHeaderField';
  import ColumnHeader from './ColumnHeader';
  import Flex from '../Flex';
  
  import { setSelectedRows, setUpdatingRow } from '../../actions';
  import {
  	getVisibleColumns,
  	getNestedVisibleColumns,
  } from '../../reducers/mappings';
  import { getIsShowingNestedColumns } from '../../reducers/nestedColumns';
  
  type Props = {
  	visibleColumns: string[],
  	nestedVisibleColumns: string[],
  	isShowingNestedColumns: boolean,
  	headerRef: any,
  };
  
  const DataTableHeader = ({
  	visibleColumns,
  	isShowingNestedColumns,
  	nestedVisibleColumns,
  	headerRef,
  }: Props) => {
  	const mappingCols = isShowingNestedColumns
  		? nestedVisibleColumns
  		: visibleColumns;
  	const columns = ['_id', ...mappingCols];
  
  	if (columns.length >= 1) {
  		return (
  			<Flex
  				wrap="nowrap"
  				css={{
  					zIndex: 100,
  					position: 'relative',
  					overflow: 'hidden',
  				}}
  				innerRef={headerRef}
  			>
  				{columns.map(
  					col =>
  						col === '_id' ? (
  							<IdHeaderField key={col} />
  						) : (
  							<ColumnHeader col={col} key={col} />
  						),
  				)}
  			</Flex>
  		);
  	}
  	return null;
  };
  
  const mapStateToProps = state => ({
  	visibleColumns: getVisibleColumns(state),
  	nestedVisibleColumns: getNestedVisibleColumns(state),
  	isShowingNestedColumns: getIsShowingNestedColumns(state),
  });
  
  const mapDispatchToProps = {
  	onSelectedRows: setSelectedRows,
  	onSetUpdatingRow: setUpdatingRow,
  };
  
  const DataTableContainer = connect(
  	mapStateToProps,
  	mapDispatchToProps,
  )(DataTableHeader);
  
  export default forwardRef((props, ref) => (
  	<DataTableContainer {...props} headerRef={ref} />
  ));
  
subject: fix typo