Setting individual column widths in custom table component

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?

In your code, you were setting style={{ width: '75px' }} on each cell, but this doesn't affect the overall grid layout. The grid's grid-auto-columns and grid-template-columns properties control column sizes, so the width of individual div elements inside the grid doesn't override the grid's behavior.

To explicitly set column widths, you should use grid-template-columns on the parent container (both header and .table .row). This ensures that the grid defines the column widths consistently across both the header and table rows.

Set the column width with grid-template-columns: This allows each column to have a defined width (e.g., 75px). Apply it to both the header and rows: Ensure both areas use the same grid template to align columns correctly.

header, .table .row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); /* Sets column width to 75px */
  gap: 5px; /* Optional: Adjusts spacing between columns */
}


<header style={{ gridTemplateColumns: getTemplateColumns().map(() => '75px').join(' ') }}>
  {getTemplateColumns().map(item => <div>{getHeaderCell(item)}</div>)}
</header>

<div className={styles.table}>
  {rows.map((row, rowIdx) => (
    <div className={styles.row} style={{ gridTemplateColumns: getTemplateColumns().map(() => '75px').join(' ') }}>
      {getTemplateColumns().map(item => 
        <div className={styles.cell}>
          {getTableCell(item, rowIdx)}
        </div>
      )}
    </div>
  ))}
</div>