I’m building my own Table
component in React. It’s coming along very well but I’ve hit a hurdle.
My approach was to pass in a template object, consisting of an array of column definitions, along with an object array that represents the data to be displayed. Because Table
has to be generic, the number of columns and rows can vary in every case.
To style it, I opted to use display: grid
. This has worked fine except I now can’t figure out how to explicitly set the width of a given column. Put another way, when rendering, I want to be able to explicitly set a column’s width.
Here’s my basic SCSS layout code:
.main {
width: 100%;
header {
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
div {
padding: 5px;
margin-left: unset;
}
}
.table {
.row {
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
height: fit-content;
align-items: center;
.cell {
padding: 2px 5px;
}
}
}
}
My React code looks like this:
return (
<div className={styles.main} style={style}>
<header>
{getTemplateColumns().map(item => <div style={{ width: '75px' }}>{getHeaderCell(item)}</div>)}
</header>
<div className={styles.table}>
{rows.map((row, rowIdx) => {
return (
<div className={styles.row}>
{getTemplateColumns().map(item =>
<div className={styles.cell} style={{ width: '75px' }}>
{getTableCell(item, rowIdx)}
</div>)
}
</div>
)
})}
</div>
</div>
);
You can see in the code just above that I’m experimenting with trying to explicitly set a column’s width but it’s having no effect. I assume this is because the grid
layout doesn’t allow for this.
Is there a way to do this or should I just go old school and instead implement table
, tr
, td
, etc., where I have complete control over column widths?