Attempting to include row numbers in HTML/CSS.
Below is the HTML code with 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>
Attempted using custom.css as suggested in this solution:
The custom.css file loads successfully, and custom properties are visible in other elements. However, the rows do not display row numbers.