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.

Answer 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>
  )
}