React.js e componenti ricchi di datagrid O almeno hack [2015]

Question

Prima, stavamo usando jqGrid. Successivamente ci siamo spostati su Backbone.js, abbiamo iniziato a lavorare con Backgrid.

Ora, stiamo valutando lo spostamento di componenti Backbone.Views per Reagire e non è possibile trovare alcun plug-in di griglia/componente aggiuntivo grasso e ricco come quelli menzionati.

Fondamentalmente, abbiamo bisogno di tutto ciò che potreste immaginare, selezionando, filtrando, impaginando, modificando, ordinando, subgrid ... Out of the box :) So che possiamo creare il nostro componente di tabella, aggiungendo ordinamento e cose, ma questo è troppo lavoro per noi. Speravamo di più in qualche "riutilizzo" :)

C'è qualche componente della rete che mi è sfuggito su Google?

o

C'è qualche modo (brutto) di utilizzare alcuni dei vecchi DOM dipendente, jquery, backbone.js roba con Reagire?

Answer 1

ReactDataGrid è un datagrid per React e ha molte delle funzionalità menzionate, ovvero l'ordinamento, il filtraggio, la selezione, i formattatori e gli editor personalizzati, il copia e incolla, il trascinamento della cella verso il basso, le colonne bloccate. Impaginazione e subgrid sono sulla mappa stradale.Provalo

Answer 2

È possibile utilizzare qualsiasi libreria javascript semplice con React. Anche se cambia direttamente il DOM. Un'eccezione è che questa libreria dovrebbe cambiare solo il proprio pezzo di DOM. È possibile "disabilitare" React per componente. React non funzionerà con questo componente dopo il primo rendering.

React.createClass({ 
    componentDidMount: function() { 
     myNativeJsGrid.init({ 
      domElem: this.getDOMNode(), 
      data: props, 
      onRowRemove: function(row){ 
       this.props.onRowRemove(row); 
      }.bind(this) 
     }); 
    }, 
    shouldComponentUpdate: function(props) { 
     myNativeJsGrid.update({ 
      domElem: this.getDOMNode(), 
      data: props 
     }); 
     return false; 
    }, 
    render: function() { 
     return React.DOM.div(); 
    } 
}); 

Nota return false; in shouldComponentUpdate. Indica a Reagire che non dovrebbe aggiornare nulla nel DOM (lo facciamo manualmente).

L'implementazione di componentDidMount e shouldComponentUpdate dipende dall'API della griglia. Ma l'idea è che si dovrebbe:

• griglia init in componentDidMount

• aggiornamento griglia a eventi di rete interne shouldComponentUpdate

• uso per richiamare le funzioni da props aggiornare i dati, se necessario

Answer 3

Inizio utilizzo: Griddle ed è disponibile anche in NPM.

1. formattazione personalizzata
2. Infinite Styling scorrimento
3. personalizzato

npm install griddle-react --save

Answer 4

Partenza http://zippyui.github.io/react-datagrid/#/, è una bella griglia, con un sacco di funzionalità built-in

Answer 5

C'è anche http://allenfang.github.io/react-bootstrap-table Costruito completamente sui tavoli Bootstrap.