Add a 'serial number' column to react-virtualized material-ui table?

Question

I'm trying to include an additional column showcasing the serial number for a react-virtualized table. lets take a simple table example. Also in case we are sorting this table, the serial number should not get reordered. any ideas?

PS: serial number column isnt part of the data from which it is deriving columns and hence cannot be obtained through rowGetter. It has to be a seperate disconnected column which doesnt use 'datakey'.

import React from 'react';
import ReactDOM from 'react-dom';
import { Column, Table } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

// Table data as an array of objects
const list = [
  { name: 'Brian Vaughn', description: 'Software engineer' }
  // And so on...
];

// Render your table
ReactDOM.render(
  <Table
    width={300}
    height={300}
    headerHeight={20}
    rowHeight={30}
    rowCount={list.length}
    rowGetter={({ index }) => list[index]}
  >
    <Column
      label='Name'
      dataKey='name'
      width={100}
    />
    <Column
      width={200}
      label='Description'
      dataKey='description'
    />
  </Table>,
  document.getElementById('example')
);

Please share some sample data of 'serial number column' – mehamasum Feb 08 '19 at 10:59 — mehamasum, Feb 08 '19 at 10:59
simple numerals in increasing order: 1,2,3,4..... – Kombo Feb 08 '19 at 14:22 — Kombo, Feb 08 '19 at 14:22

score 0 · Accepted Answer · answered Feb 09 '19 at 00:36

You could do so with the help of cellDataGetter prop of Column component. See docs

Also use disbaleSort prop to disable the sort behavior of Column.

Here is an exmaple:

<Column
  label="Serial"
  width={200}
  disableSort
  dataKey="serial"
  cellDataGetter={() => this.getSerial()}
/>

getSerial can be a simple function that generates the next serial, regardless of the arguments to cellDataGetter:

getSerial() {
  return ++this.serial;
}

Here is a demo:

Add a 'serial number' column to react-virtualized material-ui table?

1 Answers1