Auto increment column number in html table boostrap 5? - html

Question

I am trying to auto increment column with header ID, using reactjs bootstrap5.
The table loads data from a database.
<table className="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Tick</th>
<th>Percent</th>
<th>Ratio</th>
<th>Broke</th>
<th />
</tr>
</thead>
<tbody>
{ this.props.sett_list.map(dca_sett_list_item => (
<tr key={sett_list_item.id}>
<td>{sett_list_item.id}</td>
<td>{sett_list_item.ticker}</td>
<td>{sett_list_item.percent_down}</td>
<td>{sett_list_item.pe_ratio}</td>
<td><button className='btn btn-primary btn-sm'>BROKE</button></td>
<td><button onClick={this.props.deleteSettings_T.bind(this, sett_list_item.id)}className='btn btn-danger btn-sm'>Delete</button></td>
</tr>
)) }
</tbody>
</table>
I found an answer which directs towards using css:
table {
counter-reset: tableCount;
}
.counterCell:before {
content: counter(tableCount);
counter-increment: tableCount;
}
Do I make a custom.css and add the above code to get the functionality? Or is there a better way to do this in bootstrap 5?