Grade de dados totalmente funcional para React

Uma solução de grade de dados totalmente funcional, de alto desempenho e fácil de personalizar para projetos React.

Características:

• Ordenação
• Paginação
• Filtragem
• Colunas empilhadas
• Edição embutida
• Menu contextual
• Navegação pelo teclado
• Seleção de linha
• Seleção de células
• Personalização poderosa
• Lindos temas
• Dispositivos de toque prontos
• RTL
• Faixa de linha da célula e colspan
• Rolagem personalizada
• Reordenação de coluna
• Redimensionamento de coluna

Instalar e instalar Importar:

# NPM
$ npm i @inovua/reactdatagrid-community --saveimport React from 'react';
import ReactDataGrid from '@inovua/reactdatagrid-community';
import '@inovua/reactdatagrid-community/index.css';

Uso Básico:

// define columns
const columns = [
  { name: 'name', header: 'Name', minWidth: 50, defaultFlex: 2 },
  { name: 'age', header: 'Age', maxWidth: 1000, defaultFlex: 1 },
];
// define grid styles here
const gridStyle = { minHeight: 550 };
// define tabular data here
const dataSource = [
  { id: 1, name: 'John McQueen', age: 35 },
  { id: 2, name: 'Mary Stones', age: 25 },
  { id: 3, name: 'Robert Fil', age: 27 },
  { id: 4, name: 'Roger Robson', age: 81 },
  { id: 5, name: 'Billary Konwik', age: 18 },
  { id: 6, name: 'Bob Martin', age: 18 },
  { id: 7, name: 'Matthew Richardson', age: 54 },
  { id: 8, name: 'Ritchie Peterson', age: 54 },
  { id: 9, name: 'Bryan Martin', age: 40 },
  { id: 10, name: 'Mark Martin', age: 44 },
  { id: 11, name: 'Michelle Sebastian', age: 24 },
  { id: 12, name: 'Michelle Sullivan', age: 61 },
  { id: 13, name: 'Jordan Bike', age: 16 },
  { id: 14, name: 'Nelson Ford', age: 34 },
  { id: 15, name: 'Tim Cheap', age: 3 },
  { id: 16, name: 'Robert Carlson', age: 31 },
  { id: 17, name: 'Johny Perterson', age: 40 },
];
// render the data grid
export default () => (
  <ReactDataGrid
    idProperty="id"
    columns={columns}
    dataSource={dataSource}
    style={gridStyle}
  />
);

Visualização:

Detalhes do download:

Autor: inovua

Demonstração ao vivo: Ver a demonstração

Link para download: Baixe o código-fonte

Site oficial: https://github.com/inovua/reactdatagrid

Licença: MIT