How to reuse html table for multiple tables in javascript/reactjs?

Question

I have made a table that have some values. I want to use same table code with different values and use it for multiple tables.

My current code is

 renderTable() {
    const { recordsSect } = this.state;

    let a = [];
    a.push(recordsSector)
    return recordsSector != null ? (
      <table className="table table-bordered">
        <thead>
          <tr>
            <th>Period/Range</th>
            <th>30%</th>
            <th>20%</th>
            <th>10%</th>

          </tr>
        </thead>
        <tbody>

          {a.map(item =>
            <tr key={item.id}>
              <td>Daily</td>
              <td>{item.f_dyn30_all}</td>
              <td>{item.f_dyn20_all}</td>
              <td>{item.f_dyn10_all}</td>
            </tr>)
          }

          {a.map(item =>
            <tr key={item.id}>
              <td>Weekly</td>
              <td>{item.f_wkn30_all}</td>
              <td>{item.f_wkn20_all}</td>
              <td>{item.f_wkn10_all}</td>
            </tr>)
          }

          {a.map(item =>
            <tr key={item.id}>
              <td>Monthly</td>
              <td>{item.f_mtn30_all}</td>
              <td>{item.f_mtn20_all}</td>
              <td>{item.f_mtn10_all}</td>
            </tr>)
          }

          {a.map(item =>
            <tr key={item.id}>
              <td>Quarterly</td>
              <td>{item.f_qrn30_all}</td>
              <td>{item.f_qrn20_all}</td>
              <td>{item.f_qrn10_all}</td>
            </tr>)
          }

          {a.map(item =>
            <tr key={item.id}>
              <td>Interim</td>
              <td>{item.f_inn30_all}</td>
              <td>{item.f_inn20_all}</td>
              <td>{item.f_inn10_all}</td>
            </tr>)
          }
        </tbody>
      </table>


    ) : null

  }

I would to create 6 tables with the above without rewriting all the code.
And in each table 2 substring in td will be changed. ie f & all in item.f_qrn10_all(eg).
item.(variable)_qrn10_(variable) variable - that use some dynamic value

I would like to know a better option to do this.

Try to use objects: item = { (variable): { qrn10: { (variable): (value) } } } — Maksim Tikhonov
– Maksim Tikhonov, Commented Sep 12, 2020 at 19:03

Alexandre Nicolas · Accepted Answer · 2020-09-13 13:20:26Z

1

You can describe each parts of your table with an object that has a property name and key. In your context, key seems to do a pattern (only number 30 | 20 | 10 is changing). Then you can render each parts dynamically.

const tableParts = [
  {
    name: 'Daily',
    key: 'f_dyn$_all'
  },
  {
    name: 'Weekly',
    key: 'f_wkn$_all'
  },
  {
    name: 'Monthly',
    key: 'f_mtn$_all'
  },
  {
    name: 'Quarterly',
    key: 'f_qrn$_all'
  },
  {
    name: 'Interim',
    key: 'f_inn$_all'
  }
]

// ...

/*
  Return a function with data in its scope. The function will be called with each tablePart as argument. The key of the children is a concatenation of the tablePart name and the item id to ensure unicity of each key.
*/
renderTablePart = data => tablePart =>
    data.map(item => (
      <tr key={`${tablePart.name}-${item.id}`}>
        <td>{tablePart.name}</td>
        <td>{item[tablePart.key.replace('$', '30')]}</td>
        <td>{item[tablePart.key.replace('$', '20')]}</td>
        <td>{item[tablePart.key.replace('$', '10')]}</td>
      </tr>
    ))

renderTable() {
  const { recordsSector } = this.state;

  if (recordsSector == null) return null;
  const data = [recordsSector];

  return (
    <table className="table table-bordered">
      <thead>
        <tr>
          <th>Period/Range</th>
          <th>30%</th>
          <th>20%</th>
          <th>10%</th>
        </tr>
      </thead>
      <tbody>
        {tableParts.flatMap(this.renderTablePart(data))}
      </tbody>
    </table>
  )
}

edited Sep 13, 2020 at 13:20

answered Sep 12, 2020 at 19:15

Alexandre Nicolas

1,94917 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muneeb K Over a year ago

Hi, may I know where you place this renderTablePart and const tableParts code? i tried to put the code, keep getting not defined, tried to put outside the components etc.. not working..

Alexandre Nicolas Over a year ago

@MuneebK I forgot to put this (before renderTablePart), you can put it as a method of your component. tableParts can be outside the component, if you want to put it inside just add this (this.tableParts) where it is used.

Collectives™ on Stack Overflow

How to reuse html table for multiple tables in javascript/reactjs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related