I am trying to add row numbers in html/css.

Here is the html, react populating the rows.

<table className="table table-striped">
            <thead>
              <tr>
                {/*<th>ID</th>*/}
                <th>symbol</th>
                <th>close</th>
                <th>percent</th>
                <th>PE</th>
                <th>Rake</th>
                <th />
              </tr>
              </thead>
              <tbody>
                { this.props.item_sett_list.map(item_sett_list_item => (
                  <tr key={item_sett_list_item.id}>
                    {/*<td>{item_sett_list_item.id}</td>*/}
                    <td>{item_sett_list_item.symbol}</td>
                    <td>{item_sett_list_item.close}</td>
                    <td>{item_sett_list_item.percent}</td>
                    <td>{item_sett_list_item.pe}</td>
                    {
                      this.props.rake_sett_list.length ? 
                      this.props.rake_sett_list.map(rake_sett_list_item => (
                        <td>{rake_sett_list_item.rake}</td> 
                      )) : <td><a href="#/rakesetting"><button className='btn btn-primary btn-sm'>RAKE</button></a></td>
                      
                    }
                    <td><button onClick={this.props.deleteDCASettings.bind(this, item_sett_list_item.id)}className='btn btn-danger btn-sm'>Delete</button></td>
                  </tr>
                )) }
              </tbody>
          </table>

I tried to use custom.css from this answer:

The custom.css loads, I can see custom properties in some other elements. However the rows don't get the rows numbers.

CodePudding user response：

How about map indexes:

           { this.props.item_sett_list.map((item_sett_list_item, index) => (
              <tr key={item_sett_list_item.id}>
                {/*<td>{index}</td>*/}
                <td>{item_sett_list_item.symbol}</td>
                <td>{item_sett_list_item.close}</td>
                <td>{item_sett_list_item.percent}</td>
                <td>{item_sett_list_item.pe}</td>
                {
                  this.props.rake_sett_list.length ? 
                  this.props.rake_sett_list.map(rake_sett_list_item => (
                    <td>{rake_sett_list_item.rake}</td> 
                  )) : <td><a href="#/rakesetting"><button className='btn btn-primary btn-sm'>RAKE</button></a></td>
                  
                }
                <td><button onClick={this.props.deleteDCASettings.bind(this, item_sett_list_item.id)}className='btn btn-danger btn-sm'>Delete</button></td>
              </tr>
            )) }