Theme React Data Grid

With the React Theming engine, the Ignite UI for React Grid can be easily customized to match your brand identity. In addition to predefined themes and palettes, you can further customize the look and feel of your data grid by using a set of CSS custom properties.

Available theming properties

Nome da propriedade	Tipo	Descrição
--elevação da grade	número entre 0-24	O nível de elevação a ser usado para a grade
--arrastar-elevação	número entre 0-24	O nível de elevação, a ser usado para elementos móveis (ex. cabeçalho de coluna)
--área-de-grupo-cor	cor	Cor do texto da área do grupo de grade
--grupo-área-fundo	cor	Cor do texto da área do grupo de grade
--soltar-área-texto-cor	cor	A cor do texto da área de soltar
--drop-area-ícone-cor	cor	A cor do ícone da área de soltar
--drop-area-fundo	cor	Cor de fundo da área de queda
--área-de-soltar-em-fundo-de-soltar	cor	O fundo da área de queda na cor da queda
--cabeçalho-fundo	cor	Cor de fundo do cabeçalho da grade
--cabeçalho-texto-cor	cor	Cor do texto do cabeçalho da grade
--cabeçalho-selecionado-fundo	cor	A cor de fundo do cabeçalho da grade quando selecionado (por exemplo, seleção de coluna).
--cabeçalho-cor-do-texto-selecionado	cor	A cor do texto do cabeçalho da grade quando selecionado (por exemplo, seleção de coluna).
--ícone-de-cabeçalho-classificável-cor-de-hover	cor	A cor do ícone ao passar o mouse no cabeçalho da grade quando a coluna é classificável.
--cor-do-ícone-do-cabeçalho-classificado	cor	A cor do ícone do cabeçalho da tabela classificada
--largura-da-borda-do-cabeçalho	largura da borda	A largura da borda usada para bordas de cabeçalho.
--estilo-de-borda-do-cabeçalho	estilo de borda	O estilo de borda usado para bordas de cabeçalho. Pode ser 'pontilhado', 'tracejado' ou 'sólido'
--cor-da-borda-do-cabeçalho	cor	A cor usada para bordas de cabeçalho.
--fundo-do-cabeçalho-fantasma	cor	A cor de fundo do cabeçalho arrastado.
--ghost-cabeçalho-texto-cor	cor	A cor do texto do cabeçalho arrastado.
--ghost-cabeçalho-ícone-cor	cor	A cor do ícone do cabeçalho arrastado.
--filtragem-de-fundo-e	cor	A cor de fundo da condição "E" da filtragem avançada.
--filtragem-de-fundo-ou	cor	A cor de fundo no foco/selecionado da condição "E" de filtragem avançada.
--filtragem-de-fundo-e-foco	cor	A cor de fundo da condição "OU" de filtragem avançada.
--filtragem-de-fundo-ou--foco	cor	A cor de fundo no foco/selecionado da condição "OU" de filtragem avançada.
--cor-da-borda-da-grade	cor	A cor da borda ao redor da grade.
--conteúdo-fundo	cor	A cor de fundo do corpo da grade.
--conteúdo-texto-cor	cor	A cor do texto do corpo da grade.
--linha-fundo-estranho	cor	A cor de fundo das linhas ímpares.
--linha-par-fundo	cor	A cor de fundo de linhas pares.
--linha-ímpar-texto-cor	cor	A cor do texto das linhas ímpares.
--linha-par-texto-cor	cor	A cor do texto das linhas pares.
--linha-selecionada-fundo	cor	A cor de fundo da linha selecionada.
--árvore-selecionada-filtered-linha-texto-cor	cor	A cor do texto da linha selecionada/filtrada
--linha-selecionada-cor-do-texto	cor	A cor do texto da linha selecionada.
--célula-selecionada-dentro-do-fundo	cor	O plano de fundo da célula selecionada dentro de uma linha/coluna selecionada.
--célula-selecionada-dentro-da-cor-do-texto	cor	A cor da célula selecionada dentro de uma linha/coluna selecionada.
--linha-selecionada-hover-fundo	cor	O plano de fundo da linha selecionada.
--linha-selecionada-hover-texto-cor	cor	O hover text da linha selecionada
--linha-hover-fundo	cor	A cor de fundo da linha de foco.
--linha-hover-texto-cor	cor	A cor do texto da linha de foco.
--linha-borda-cor	cor	A cor da borda entre as linhas do corpo da grade.
--largura-da-borda-fixada	largura da borda	A largura da borda das linhas/colunas fixadas.
--estilo-de-borda-fixada	estilo de borda	O estilo de borda das linhas/colunas fixadas. Pode ser 'pontilhado', 'tracejado' ou 'sólido'
--cor-da-borda-fixada	cor	A cor da borda das linhas/colunas fixadas.
--célula-ativa-cor-da-borda	cor	A cor da borda da célula ativa (focada).
--célula-selecionada-fundo	cor	A cor de fundo da célula selecionada.
--árvore-selecionada-filtrada-célula-texto-cor	cor	A cor do texto da célula selecionada/filtrada
--célula-selecionada-cor-do-texto	cor	A cor do texto da célula selecionada.
--edição-de-células-fundo	cor	A cor de fundo de uma célula no modo de edição.
--modo-de-edição-cor	cor	A cor do texto no modo de edição
--indicador-de-linha-editada	cor	A cor do indicador da linha editada.
--célula-nova-cor	cor	A cor do texto de uma célula nova e não editada. Usado ao adicionar uma nova linha em uma grade.
--valor-editado-da-célula-cor	cor	A cor do valor editado da célula.
--célula-desativada-cor	cor	A cor do texto de uma célula desabilitada.
--redimensionar-linha-cor	cor	Cor da linha de redimensionamento do cabeçalho da grade.
--cor-do-indicador-de-queda	cor	A cor do indicador de queda.
--grupo-rótulo-coluna-nome-texto	cor	Cor do texto do nome da coluna da linha do grupo de grade.
--ícone-de-rótulo-de-grupo	cor	A cor do ícone da linha do grupo de grade.
--grupo-rótulo-texto	cor	A cor do texto da linha do grupo de grade.
--expandir-todos-ícone-cor	cor	O cabeçalho da grade expande todas as linhas do grupo com a cor do ícone.
--expandir-todos-ícone-hover-cor	cor	O cabeçalho da grade expande todas as linhas do grupo com o ícone de cor flutuante.
--expandir-ícone-cor	cor	A cor do ícone de expansão da linha da grade.
--expandir-ícone-hover-cor	cor	A cor do ícone de expansão da linha da grade.
--ativo-expandir-ícone-cor	cor	O plano de fundo da área de queda na cor da queda.
--ativo-expandir-ícone-passar-cor	cor	O plano de fundo da área de queda na cor da queda.
--grupo-contagem-fundo	cor	A linha do grupo de grade contém a cor de fundo do emblema.
--grupo-contagem-texto-cor	cor	A cor do texto do emblema de contagem de linhas do grupo de grade.
--grupo-linha-fundo	cor	Cor de fundo da linha do grupo de grade.
--grupo-linha-fundo-selecionado	cor	O plano de fundo da área de queda na cor da queda.
--filtragem-cabeçalho-fundo	cor	A cor de fundo do cabeçalho da coluna filtrada.
--filtragem-cabeçalho-texto-cor	cor	A cor do texto do cabeçalho da coluna filtrada.
--filtragem-linha-fundo	cor	A cor de fundo da linha de filtragem.
--filtragem-linha-texto-cor	cor	A cor do texto da linha de filtragem.
--árvore-filtrada-texto-cor	cor	A cor de fundo da linha de agrupamento em foco.
--corpo-resumos-fundo	cor	A cor de fundo dos grupos de resumo localizava o corpo.
--corpo-resumos-texto-cor	cor	A cor do texto dos grupos de resumo localizava o corpo.
--root-resumos-fundo	cor	A cor de fundo dos grupos de resumo localizava o rodapé.
--root-resumos-texto-cor	cor	A cor do texto dos grupos de resumo localizava o rodapé.
--destaque-de-linha	cor	A cor de destaque da linha da grade.
--linha-fantasma-fundo	cor	A cor de fundo da linha arrastada.
--linha-arrastar-cor	cor	A cor da alça de arrasto.
--soltar-área-borda-raio	número entre 0 e 1	O raio da borda usado para drop-area. Pode ser uma fração entre 0 e 1, pixels ou porcentagem.

How to use

Conforme mencionado acima, usar as variáveis CSS da tabela nos permite estilizar nossa grade. Digamos que queremos alterar a grade para usar um Tema Escuro, alterando o seguinte plano de fundo do cabeçalho e cores de texto etc., podemos fazer isso assim em um arquivo opcionalmente chamado dark-theme.css.

importar "./dark-theme.css";

.ig-data-grid {
  /* shared variables used in custom properties */
  --cell-text-color:#58258b;
  --cell-background:#191919;
  --cell-selected-background: #58258b;
  --cell-selected-within-text-color: #191919;
  --cell-selected-within-background: #58258b;

  --row-selected-background:var(--cell-selected-background);
  --row-hover-background:var(--cell-selected-background);
  --row-hover-text-color:var(--cell-background);

  --header-background: #58258b;
  --header-text-color: #191919;
  --header-separator-background: #58258b;
  --header-separator-width: 5px;

  --section-header-background: #191919;
  --section-header-text-color: #58258b;
  --section-header-selected-background: #58258b;
  --section-header-selected-text-color: #191919;

  --row-separator-background: #191919;
  --row-separator-last-sticky-row-background: #191919;
  --row-separator-pinned-row-background: #58258b;
  --row-separator-sticky-row-background: #58258b;

  --column-resizing-separator-background: #58258b;
  --column-moving-separator-background: #58258b;


  --filtering-header-background: #272727;
  --filtering-header-text-color: #ffffff;
  --filtering-row-background: #272727;
  --filtering-row-text-color: #ffffff;
  --tree-filtered-text-color: #ffffff;

  --summary-root-background: #7446b9;
  --summary-root-label-text-color: #191919;
  --summary-root-value-text-color: #191919;
}

.ig-grid-column-options {
  --background-color: black;
  --text-color: #7446b9;
  --summary-list-text-color: #7446b9;
  --summary-list-background: #191919;
}

.ig-data-grid-toolbar {
  --background-color: #191919;
  --text-color: #58258b;
  --dialog-background-color: #191919;
}

.ig-column-chooser {
  --background-color: #191919;
  --title-color: green;
  --select-all-caption-text-color: #58258b;
  --search-icon-color: #58258b;
  --search-text-color: #58258b;
  --search-background-color: #191919;
  --search-border-color: #58258b;
  --search-text-style: 12px 'Courier';
}

.ig-column-pinning {
  --background-color: white;
  --text-color: #7446b9;
  --select-all-caption-text-color: #58258b;
  --search-icon-color: #58258b;
  --search-text-color: #58258b;
  --search-background-color: #191919;
  --search-border-color: #58258b;
  --search-text-style: 12px 'Courier';
}