Início / coding / Perguntas / 79481073
Accepted
Dreamer64
Asked: 2025-03-03 21:20:38 +0800 CST

Como personalizar o cabeçalho da tabela HeroUI quando a propriedade HeaderSticky é aplicada?

  • 772

Usando (Vite + ReactJS + Tailwind CSS v3 + HeroUI)

Se aplicássemos isHeaderStickyprop em uma tabela HeroUI, ele adicionaria outro estilo, como algum tipo de sombra, contorno ou talvez algum tipo de borda. Como podemos remover isso?

insira a descrição da imagem aqui

Meu código para produzir a imagem acima é:

  <Table
    removeWrapper
    isHeaderSticky                    
    classNames={{ 
      th: ["!rounded-none", "!shadow-none", "!border-none"],          
    }}
    >
    <TableHeader>
      <TableColumn key="name">NAME</TableColumn>
      <TableColumn key="role">ROLE</TableColumn>
      <TableColumn key="status">STATUS</TableColumn>
    </TableHeader>
    <TableBody items={items} emptyContent={"No permits found"}>              
    </TableBody>
  </Table>

Tentei adicionar isto:

classNames={{
  th: ["!border-none", "!rounded-none", "!shadow-none"],
}}

mas não está funcionando, então alguma ideia, por favor?

reactjs

1 respostas

  1. Best Answer

    Verifiquei o isHeaderStickyexemplo na documentação do HeroUI, que é uma reprodução funcional. Isso me permitiu ver como o HeroUI estilizou o thead.

    <thead class="[&amp;>tr]:first:rounded-lg sticky top-0 z-20 [&amp;>tr]:first:shadow-small" role="rowgroup">
  <tr role="row" class="group/tr outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2">
    ...
  </tr>
</thead>

    Então, os primeiros tr filhos no theadrecebem a shadow-smallclasse. O primeiro trem si não recebe um outline, apenas no modo de foco. Então, eu só preciso remover o shadowdo theadelemento.

    Vamos ver como posso implementar classes no thead. O <Table>componente, como você mencionou na pergunta, tem um classNamesatributo que aceita um array com a chave theadao lado de th.

    classNames: Partial<Record<'base' | 'table' | 'thead' | 'tbody' | 'tfoot' | 'emptyWrapper' | 'loadingWrapper' | 'wrapper' | 'tr' | 'th' | 'td' | 'sortIcon', string>>

// prettier format
classNames: {
  base: "...",
  table: "...",
  thead: "...",
  // etc.
}

    Vamos passar:

    <Table
  removeWrapper
  isHeaderSticky                    
  classNames={{
    thead: "[&>tr]:first:shadow-none", // or can use [&>tr]:first:!shadow-none    
  }}
>
  ...
</Table>

    resultado

    O shadow-nonepassado para o trpoderia funcionar, mas para o th(como você mencionou na pergunta), definitivamente não é adequado, porque a sombra é aplicada a thead > tr:first.

    A solução mais precisa seria dizer que theado primeiro tr dentro dele não deveria receber sombra.

    classNames={{
  thead: "[&>tr]:first:shadow-none", // this will be true only to thead > tr:first
}}

    Alternativamente, aplicar first:shadow-noneao trpode funcionar, mas isso não só removeria a sombra de thead > tr:first, mas também de, por exemplo, tbody > tr:first.

    classNames={{
  tr: "first:shadow-none", // this will be true to thead > tr:first, but also will be true to tbody > tr:first
}}
    • 0

relate perguntas