Início / coding / Perguntas / 79216917
Accepted
RobertW
Asked: 2024-11-23 08:43:45 +0800 CST

Definir larguras de colunas individuais no componente de tabela personalizado

  • 772

Estou construindo meu próprio Tablecomponente em React. Está indo muito bem, mas encontrei um obstáculo.

Minha abordagem foi passar um objeto de modelo, consistindo de um array de definições de coluna, junto com um array de objetos que representa os dados a serem exibidos. Como Tabletem que ser genérico, o número de colunas e linhas pode variar em cada caso.

Para estilizá-lo, optei por usar display: grid. Isso funcionou bem, exceto que agora não consigo descobrir como definir explicitamente a largura de uma determinada coluna. Em outras palavras, ao renderizar, quero poder definir explicitamente a largura de uma coluna.

Aqui está meu código básico de layout SCSS:

.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;
      }
    }
  } 
}

Meu código React se parece com isso:

  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>
  );

Você pode ver no código logo acima que estou experimentando tentar definir explicitamente a largura de uma coluna, mas não está tendo efeito. Imagino que seja porque o gridlayout não permite isso.

Existe uma maneira de fazer isso ou devo simplesmente seguir o método antigo e implementar table, tr, td, etc., onde tenho controle total sobre as larguras das colunas?

reactjs

1 respostas

  1. Best Answer

    No seu código, você estava definindo style={{ width: '75px' }} em cada célula, mas isso não afeta o layout geral da grade. As propriedades grid-auto-columns e grid-template-columns da grade controlam os tamanhos das colunas, então a largura dos elementos div individuais dentro da grade não substitui o comportamento da grade.

    Para definir explicitamente as larguras das colunas, você deve usar grid-template-columns no contêiner pai (tanto header quanto .table .row). Isso garante que a grade defina as larguras das colunas consistentemente nas linhas de header e table.

    Defina a largura da coluna com grid-template-columns: Isso permite que cada coluna tenha uma largura definida (por exemplo, 75px). Aplique-o ao cabeçalho e às linhas: Garanta que ambas as áreas usem o mesmo modelo de grade para alinhar as colunas corretamente.

    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>
    • 1

relate perguntas