ylliX - Online Advertising Network
Vertex AI - Antrophic and Mistral models: Why does it require Imegen access?

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?



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *