Dynamic table with React

Question

I am trying to render a dynamic table using react with the following data structure:

{
  numRows: 2,
  numCols: 3,
  cells: [
    {
      id: 1,
      pos: {
        row: 1,
        col: 1
      },
      content: 'This is the content 1'
    },
    {
      id: 2,
      pos: {
        row: 1,
        col: 2
      },
      content: 'This is the content 2'
    },
    {
      id: 3,
      pos: {
        row: 1,
        col: 3
      },
      content: 'This is the content 2.5'
    },
    {
      id: 4,
      pos: {
        row: 2,
        col: 1
      },
      content: 'This is the content 3'
    },
    {
      id: 5,
      pos: {
        row: 2,
        col: 3
      },
      content: 'This is the content 4'
    }
  ]
}

I think this data structure is best for my application as a user can edit cells out of order but if there is a better way please let me know.

I have the following logic for rendering this data into a table, but it contains many loops so I am wondering if there is a better/more efficient way of rendering out this data structure?

let rows = []

for (let row = 1; row <= numRows; row++) {
  let children = []

  for (let col = 1; col <= numCols; col++) {
    let hasCell = false
    cells.forEach((cell) => {
      if (cell.pos.row === row && cell.pos.col === col) {
        hasCell = true
        children.push(<Cell>{cell.content}</Cell>)
      }
    })

    if (!hasCell) {
      children.push(<Cell />)
    }
  }

  rows.push(<Row>{children}</Row>)

Thanks

Jyothi Babu Araja · Accepted Answer · 2016-12-05 15:24:51Z

The structure of your table is the major concern here.

In order to have better solution, try to restructure your table data.

If memory is not a concern compared to time, some how managed to reduce your N^3 iteration to N^2 iterative solution.

var tableData = {
  numRows: 2,
  numCols: 3,
  cells: [
    {
      id: 1,
      pos: {
        row: 1,
        col: 1
      },
      content: 'This is the content 1'
    },
    {
      id: 2,
      pos: {
        row: 1,
        col: 2
      },
      content: 'This is the content 2'
    },
    {
      id: 3,
      pos: {
        row: 1,
        col: 3
      },
      content: 'This is the content 2.5'
    },
    {
      id: 4,
      pos: {
        row: 2,
        col: 1
      },
      content: 'This is the content 3'
    },
    {
      id: 5,
      pos: {
        row: 2,
        col: 3
      },
      content: 'This is the content 4'
    }
  ]
};

function createEmptyTable(rows, cols){
  var arr = [];
  for(var i = 0; i < rows; i++){
    arr.push(new Array(cols));
  }
  return arr;
}

var rows = tableData.numRows;
var cols = tableData.numCols;
var table  = createEmptyTable(rows, cols); //crate empty table 2D
tableData.cells.forEach(function(cell, i){
  table[cell.pos.row-1][cell.pos.col-1] = cell //cell data into table cell
});

console.log(table); //table structure

for(var i = 0; i < rows; i++)
  for(var j = 0; j < cols; j++){
    var cell = table[i][j];
    if(cell){
      //your render method here
      console.log(cell.content);
    }
  }

Collectives™ on Stack Overflow

Dynamic table with React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related