How to use fixed-data-table-2

render() {
  // const { rowIndex, field, data, ...props } = this.props;
  const { rowIndex, field, columnKey, data, ...props } = this.props;
  return <Cell {...props}>{data[rowIndex][columnKey]}</Cell>;
 }

// const MyCustomCell = ({ rowIndex, field, data, special, ...props }) => (
const MyCustomCell = ({ rowIndex, field, columnKey, data, ...props }) => (
 <Cell>{data[rowIndex].special ? "I'm special" : "I'm not special"}</Cell>
)

render() {
  const { data, rowIndex, columnKey, dataVersion, ...props } = this.props;
  const rowObject = data.getObjectAt(rowIndex);
  return (
   <Cell {...props}>
    {rowObject ? (
     // <ExampleImage src={rowObject['avatar']} />
     <ImageCell {...this.props} />
    ) : (
     <img
      width="16"
      height="16"
      alt="star"
      src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
     />
    )}
   </Cell>
  );
 }

render() {
  return (
   <Table
    rowsCount={this.state.myTableData.length}
    rowHeight={50}
    height={500}
    <Column
     header={<Cell>Name</Cell>}
     columnKey={'name'}
     width={200}
    />
    <Column
     header={<Cell>Email</Cell>}
     columnKey={'email'}
     cell={<MyLinkCell data={this.state.myTableData} field="email" />}
     width={300}
    />
    <Column
     header={'Special or Not'}
     columnKey={'special'}

render() {
  const {data, rowIndex, columnKey, ...props} = this.props;

  // Hacky workaround to make filtered sorts work
  // This should be fixed rendering the sorted filter
  // so that this can just call data.getObjectAt(index)
  function getDataObjectAt(data, index) {
   if (Array.isArray(data)) {
    return data[index];
   }

   return data.getObjectAt(index);
  }

  return (
   <Cell {...props}>
    {getDataObjectAt(data, rowIndex)[columnKey]}
   </Cell>
  );
 }

<Table
 rowHeight={120}
 rowsCount={pagedData.getSize()}
 <Column
  header={<Cell></Cell>}
  cell={({ rowIndex }) => <Cell>{rowIndex}</Cell>}
  fixed={true}
  width={50}
 />
 <Column
  header={<Cell></Cell>}
  columnKey="avatar"
  cell={<PagedImageCell data={pagedData} />}
  height={200}
 ></Column>
 <Column
  columnKey="firstName"
  header={<Cell>First Name</Cell>}
  cell={<PagedCell data={pagedData} />}
  fixed={true}
  width={100}
 />
 <Column
  columnKey="lastName"
  header={<Cell>Last Name</Cell>}
  cell={<PagedCell data={pagedData} />}
  fixed={true}

render() {
  const {onSortChange, sortDir, children, ...props} = this.props;

  return (
   <Cell {...props}>
    <a onClick={this.onSortChange}>
     {children} {sortDir ? (sortDir === SortTypes.DESC ? '↓' : '↑') : ''}
    </a>
   </Cell>
  );
 }

<br />
<br />
<Table
 rowHeight={50}
 rowsCount={sortedSongList.getAll().filter(e => filteredSongList.getAll().indexOf(e) !== -1).length}
 height={1000}
 {...this.props}>
 <Column
  columnKey="title"
  header={
 <Column
  columnKey="artist"
  header={
 <Column
  columnKey="album"
  header={
 <Column
  columnKey="trackNumber"
  header={
 <Column
  columnKey="year"
  header={

render() {
  const { data, rowIndex, columnKey, dataVersion, ...props } = this.props;
  const rowObject = data.getObjectAt(rowIndex);
  return (
   <Cell {...props}>
    {rowObject ? (
     rowObject[columnKey]
    ) : (
     <img
      width="16"
      height="16"
      alt="star"
      src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
     />
    )}
   </Cell>
  );
 }

render() {
  // const { rowIndex, field, data, ...props } = this.props;
  const { rowIndex, field, columnKey, data, ...props } = this.props;
  const link = data[rowIndex][columnKey];
  return (
   <Cell {...props}>
    <a href={link}>{link}</a>
   </Cell>
  );
 }