Making react-base-table work with array data

[statico]

Thank you for making this wonderful library. I've added it to my JavaScript grid library comparison page, https://jsgrids.statico.io/, and used it on a new tool I'm building to work with CSV files, which you can see in action here: https://csvhacker.statico.io/#url:%27https://csv.statico.io/10k.csv%27

For performance purposes, I want my data to be arrays of arrays, so I needed to tweak react-base-table so that it would assign React key properties correctly and not complain about violating prop types. Those hacks are here: https://github.com/statico/csvhacker/commit/4322b94d45497e86e3d66a7ead9b694979342275

TableRow.propTypes.rowData = PropTypes.array
import TableCell from "react-base-table/es/TableCell"
TableCell.propTypes.rowData = PropTypes.array
import GridTable from "react-base-table/es/GridTable"
GridTable.prototype._itemKey = ({ rowIndex }) => String(rowIndex)

It would be wonderful if react-base-table supported array data more easily, but I would understand if such functionality is out of scope.

Thanks!

[nihgwu]

so for csv the rowData is an array, it could be supported if I decide to support rowKey as a function, but I don't think it will be supported in the near future

[maxcorbeau]

Great library, but it's a pity that being designed to "display large datasets" it doesn't support array of arrays as they have lower server transfer/ browser memory footprint.

const len = (v) => {
  return JSON.stringify(v).length
}

const ROWS_CNT=10000
const COLS_CNT=20

let arrays = []
let objects = []
for (let i = 0; i < ROWS_CNT; i++) {
  let arr = []
  let  obj = {}
  for (let j = 0; j < COLS_CNT; j++) {
    let k = 'row-'+i+'col-'+j
    let v = i*j
    arr[j] = v
    obj[k] = v
  }
  arrays.push(arr)
  objects.push(obj)
}
console.log('arrays',len(arrays)) # => 1 168 677
console.log('objects',len(objects)) # => 4 446 477
console.log('len objects vs. len arrays',len(objects)/len(arrays))  # => objects are 3. 8 x bigger than arrays

Any chance of seeing support for array of arrays any time soon?

[maxcorbeau]

I see column.dataGetter in the API doc, is this the recommended way to go? https://autodesk.github.io/react-base-table/api/column

[nihgwu]

@maxcorbeau yes, and probably you can just use index a dataKey, like dataKey="0"