Currently, I am working on a dynamic table component using CSS grid. My goal is to customize the grid-template-columns CSS property. I am familiar with using repeat in CSS to achieve this. However, I am facing a challenge when it comes to dynamically changing the repeat value whenever I utilize the component in React. For instance, if I require a table with 5 columns, I would use repeat(5, 1fr), and for a 3 column table, I would use repeat(3, 1fr).
<div className="xx-table">
<div className="xx-table-header">
<div className="xx-table-row">
<div className="xx-table-data">Title1</div>
<div className="xx-table-data">Title2</div>
<div className="xx-table-data">Title3</div>
<div className="xx-table-data">Title4</div>
<div className="xx-table-data">Title5</div>
</div>
</div>
<div className="xx-table-body">
<div className="xx-table-row">
<div className="xx-table-data">Data1</div>
<div className="xx-table-data">Data2</div>
<div className="xx-table-data">Data3</div>
<div className="xx-table-data">Data4</div>
<div className="xx-table-data">Data5</div>
</div>
<div className="xx-table-row">
<div className="xx-table-data">Data6</div>
<div className="xx-table-data">Data7</div>
<div className="xx-table-data">Data8</div>
<div className="xx-table-data">Data9</div>
<div className="xx-table-data">Data10</div>
</div>
</div>
</div>
Here is the CSS code snippet:
xx-table-row {
display: grid;
grid-template-columns: repeat(5, minmax(100px, 1fr));
}
I am currently exploring different methods to achieve this goal, such as using inline styles or any other technique that might be suitable.