ag grid Download - ag grid Download do código-fonte

ag grid

Outro código-fonte

Baixar

Grade de dados JavaScript | Tabela JavaScript

AG Logo

? Site • ? Documentação • ?️ Comunidade

Bifurcações do GitHub

AG Grid é um JavaScript Data Grid completo e altamente personalizável . Ele oferece excelente desempenho , não possui dependências de terceiros e vem com suporte para Reagir , Angular e Vue .

Visão geral

Índice

Grade de dados JavaScript | Tabela JavaScript

Suporte Empresarial
Relatórios de bugs
Questões
Contribuindo
Ferramentas e extensões
Vitrine
Observadores das estrelas
Componentes personalizados
Temas
Temas personalizados
Instalação
Configurar
Projetos Semente
Características
Exemplos
? Visão geral
⚡️ Início rápido
?️ Personalizações
? Comunidade
? Apoiar
⚠️
Licença

AG Grid está disponível em duas versões: Community e Enterprise.

ag-grid-community é gratuito, disponível sob a licença MIT e vem com todos os recursos básicos esperados de uma grade de dados JavaScript, incluindo classificação, filtragem, paginação, edição, componentes personalizados, temas e muito mais.
ag-grid-enterprise está disponível sob uma licença comercial e vem com recursos avançados, como gráficos integrados, agrupamento de linhas, agregação, dinamização, mestre/detalhe, modelo de linha do lado do servidor e exportação, além de suporte dedicado de nossa equipe de engenharia.

Características

Recurso	Comunidade AG Grid	AG Grid Empresa
Filtragem	✅	✅ (Avançado)
Classificando	✅	✅
Edição de células	✅	✅
Exportação CSV	✅	✅
Arrastar e soltar	✅	✅
Temas e estilo	✅	✅
Seleção	✅	✅
Acessibilidade	✅	✅
Rolagem infinita	✅	✅
Paginação	✅	✅
Dados do lado do servidor	✅	✅ (Avançado)
Componentes personalizados	✅	✅
Gráficos Integrados	❌	✅
Seleção de intervalo	❌	✅
Agrupamento e agregação de linhas	❌	✅
Girando	❌	✅
Exportação para Excel	❌	✅
Operações da área de transferência	❌	✅
Mestre/Detalhe	❌	✅
Dados da árvore	❌	✅
Menu Coluna	❌	✅
Menu de contexto	❌	✅
Painéis de ferramentas	❌	✅
Apoiar	❌	✅

ℹ️ Nota:
Visite a página de preços para uma comparação completa.

Exemplos

Criamos várias demonstrações para mostrar o rico conjunto de recursos do AG Grid em diferentes casos de uso. Veja-os em ação abaixo ou interaja com eles em nossa página de demonstração.

Demonstração Financeira

Exemplo de dados financeiros com atualizações ao vivo e minigráficos:

Demonstração ao vivo • Código-fonte

Demonstração de inventário

Exemplo de dados de inventário para visualizar e gerenciar produtos:

Demonstração ao vivo • Código-fonte

Demonstração de RH

Exemplo de dados de RH mostrando dados hierárquicos de funcionários:

Demonstração ao vivo • Código-fonte

⚡️ Início rápido

AG Grid é fácil de configurar - tudo que você precisa fazer é fornecer seus dados e definir sua estrutura de colunas. Continue lendo para obter instruções de instalação do Vanilla JavaScript ou consulte nossos guias específicos da estrutura para Reagir , Angular e Veja.

Instalação

 $ npm install --save ag-grid-community

Configurar

1. Forneça um contêiner

Carregue a biblioteca AG Grid e crie uma div contêiner. A div deve ter altura porque o Data Grid preencherá o tamanho do contêiner pai:

 <html lang="en"> <head> <!-- Inclui todos os JS e CSS para a grade de dados JavaScript --> <script src="https://cdn.jsdelivr.net/npm/ag-grid-community /dist/ag-grid-community.min.js"></script> </head> <body> <!-- Seu contêiner de grade de dados --> <div id="myGrid" style="height: 500px"></div> </body></html>

2. Instanciando a grade de dados JavaScript

Crie o Data Grid dentro do seu contêiner div usando createGrid .

 // Opções de Grid: Contém todas as configurações do Data Gridconst gridOptions = {};// Seu código Javascript para criar o Data Gridconst myGridElement = document.querySelector('#myGrid');agGrid.createGrid(myGridElement, gridOptions);

3. Defina linhas e colunas

 // Opções de grade: contém todas as configurações da grade de dadosconst gridOptions = { // Dados da linha: os dados a serem exibidos.    rowData: [ {marca: 'Tesla', modelo: 'Modelo Y', preço: 64950, elétrico: verdadeiro }, {marca: 'Ford', modelo: 'Série F', preço: 33850, elétrico: falso }, { make: 'Toyota', model: 'Corolla', price: 29600, electric: false }, ], // Definições de coluna: Define as colunas a serem exibidas.    columnDefs: [{ campo: 'marca' }, { campo: 'modelo' }, { campo: 'preço' }, { campo: 'elétrico' }],};

ℹ️ Nota:
Para obter mais informações sobre a construção de Data Grids com AG Grid, consulte nossa Documentação.

Projetos Semente

Também fornecemos projetos iniciais para ajudá-lo a começar com configurações comuns:

Ambiente	Pacotes	Módulos
Criar aplicativo React (CRA)	Pacotes	Módulos
Vite	Pacotes	Módulos
Vite - TypeScript	Pacotes	Módulos
Webpack 5 - TypeScript	Pacotes	Módulos
Webpack 5 - JavaScript	Pacotes	Módulos
CLI angular	Pacotes	Módulos
Nuxt	Pacotes	Módulos
Vite	Pacotes	Módulos

Personalizações

AG Grid é totalmente personalizável, tanto em termos de aparência quanto de funcionalidade. Há muitas maneiras de personalizar a grade e oferecemos uma seleção de ferramentas para ajudar a criar essas personalizações.

Componentes personalizados

Você pode criar seus próprios componentes personalizados para personalizar o comportamento da grade. Por exemplo, você pode personalizar como as células são renderizadas, como os valores são editados e também criar seus próprios filtros.

Existem vários tipos de componentes diferentes que você pode fornecer à grade, incluindo:

Componente de célula: para personalizar o conteúdo de uma célula.
Componente de cabeçalho: para personalizar o cabeçalho de uma coluna e grupos de colunas.
Editar componente: para personalizar a edição de uma célula.
Componente de filtro: para filtro de coluna personalizado que aparece dentro do menu de coluna.
Filtro flutuante: para filtro flutuante de coluna personalizado que aparece dentro do menu de coluna.
Componente de data: para personalizar o componente de seleção de data no filtro de data.
Componente de carregamento: para personalizar a linha da célula de carregamento ao usar o modelo de linha do lado do servidor.
Componente de sobreposição: para personalizar o carregamento e nenhum componente de sobreposição de linhas.
Componente da barra de status: para componentes personalizados da barra de status.
Componente do painel de ferramentas: para componentes personalizados do painel de ferramentas.
Componente de dica de ferramenta: para componentes de dica de ferramenta de célula personalizada.
Componente de item de menu: para personalizar os itens de menu mostrados nos menus de coluna e de contexto.

Para fornecer um renderizador de célula personalizado e filtrar componentes para a Grade, crie uma referência direta ao seu componente dentro da propriedade gridOptions.columnDefs :

 gridOptions = { columnDefs: [ { field: 'country', // A coluna para adicionar o componente ao cellRenderer: CountryCellRenderer, // Seu filtro de componente de célula personalizado: CountryFilter, // Seu componente de filtro personalizado }, ],};

Temas

AG Grid tem 4 temas, cada um disponível nos modos light e dark :

Quartzo	Material

Alpino	Balham

Temas personalizados

Todos os temas AG Grid podem ser personalizados usando a API Theming, ou você pode criar um novo tema do zero com a ajuda de nosso Theme Builder ou Figma Design System.

Comunidade

Ferramentas e extensões

AG Grid tem uma comunidade grande e ativa que criou um ecossistema de ferramentas, extensões e utilitários de terceiros para ajudá-lo a construir seu próximo projeto com AG Grid, independentemente da linguagem ou estrutura que você usa:

Reaja • Angular • Texto datilografado • Veja • Pitão • Esbelto • Sólido JS • .LÍQUIDO • Ferrugem • Laravel

Vitrine

AG Grid é usado por centenas de milhares de desenvolvedores em todo o mundo, de quase todos os setores. Embora a maioria desses projetos sejam privados, selecionamos uma seleção de projetos de código aberto de diferentes setores onde nomes conhecidos usam o AG Grid, incluindo JPMorgan , MongoDB e NASA . Visite nossa página de demonstração da comunidade para saber mais.

Observadores das estrelas

Fundada em 2016, a AG Grid tem visto um aumento constante em popularidade e é agora líder de mercado em Data Grids:

O gráfico de história estelar da AG Grid

Apoiar

Suporte Empresarial

Os clientes AG Grid Enterprise têm acesso a suporte dedicado via ZenDesk, que é monitorado por nossas equipes de engenharia.

Relatórios de bugs

Se você encontrou um bug, relate-o na seção de problemas deste repositório.

Questões

Procure problemas semelhantes no StackOverflow usando a tag ag-grid . Se nada parecer relacionado, poste uma nova mensagem lá. Por favor, não use os problemas do GitHub para fazer perguntas.

Contribuindo

AG Grid é desenvolvido por uma equipe de desenvolvedores localizados em Londres. Se quiser fazer parte da equipa envie a sua candidatura para [email protected].

⚠️ Licença

ag-grid-community está licenciada sob a licença do MIT .

ag-grid-enterprise possui licença comercial .

Consulte o arquivo LICENSE para obter mais informações.

Gráficos AG

Se você chegou até aqui, pode estar interessado em nosso projeto mais recente: AG Charts - A melhor biblioteca de gráficos JavaScript do mundo.

Inicialmente construído para alimentar gráficos integrados no AG Grid, abrimos o código-fonte deste projeto em 2018. Tendo visto o aumento constante na popularidade desde então, decidimos investir em gráficos AG com uma versão Enterprise dedicada ( ag-charts-enterprise ) em além do nosso apoio contínuo à ag-charts-community .