Arbeta med tabeller i reaktion, del ett

Översikt

Ett av de vanligaste användargränssnittet för att presentera dina data är ett bord. Det visar sig att det finns många aspekter att kontrollera när man arbetar med bord, till exempel:

• definiera kolumner och rubriker
• olika cellformat (text, nummer, kryssrutor)
• storleksändring
• filtrering
• dynamisk växande
• styling

I denna tvådelade serie kommer du att lära dig om insatserna och insatserna för att arbeta med tabelldata i React med hjälp av React Bootstrap Table-komponenten. Du kommer att kunna skapa sofistikerade och professionella utseende tabeller som standard med liten ansträngning och ändå kunna anpassa varje del du vill.

Skapa en Vanilla React App

Jag antar att du är bekant med React själv och kommer att fokusera på att arbeta med React Bootstrap Table. Envato Tuts + har en bra serie om React du kan läsa för bakgrund.

I ett nötskal använde jag React-create-app för att skapa en Vanilla React-app och installerade sedan React Bootstrap-tabellen: npm installera reagera bootstrap-table - save.

Det är viktigt att lägga till bootstrap CSS i filen public / index.html.

WebStorm

Om du använder JetBrains WebStorm och du vill köra testen, lägg till --env = jsdom i din kör konfiguration.

Grundläggande tabell

Vi börjar med en grundläggande tabell. Här är en grundläggande tabellkomponent. Det importerar BoostrapTable och TableHeaderColumn från reagerat bootstrap-bord och även CSS från dist-katalogen. 

De göra() Metoden gör ett bord med tre kolumner: "ID", "Namn" och "Värde". Den faktiska data i tabellen kommer från egenskapen "data" (this.props.data). Uppgifterna innehåller namnen på vissa tecken från det hilarious show Arrested Development.

Importreakt, Komponent från "reagera"; importera BootstrapTable, TableHeaderColumn från 'reager-bootstrap-table'; importera "... /css/Table.css"; importera '... / ... / node_modules / reagera-bootstrap-table / css / react-bootstrap-table.css-klassen Table1 utökar komponent render () return 
   ID   namn   Värde   
 );  exportera standard tabell1; 

Jag instanserade BasicTable i metoden (render) i standard App.js och skickade lite hårdkodad data:

 Importreakt, Komponent från "reagera"; importera "./App.css"; importera tabell1 från './components/Table1' var data = [id: 1, namn: 'Gob', värde: '2', id: 2, namn: 'Buster', värde: '5', id: 3, namn: 'George Michael', värde: '4']; klass App utökar komponent render () return ( 
 
Grundläggande tabell
  
 );  exportera standard App; 

För att visa bordet, skriv: npm start. Konfigurationen skapad av skapa reagera-app kollar över din kod och kommer att kompilera när du ändrar någonting, så du behöver bara springa en gång och varje ändring kommer automatiskt att återspeglas.

Sammansatt framgångsrikt! Nu kan du se realtabellen i webbläsaren. Lokal: http: // localhost: 3000 / På ditt nätverk: http://192.168.1.136:3000/ Notera att utvecklingsbyggnaden inte är optimerad. För att skapa en produktionsbyggnad, använd garnbyggnad. 

Här är resultatet:

Observera att varje kolumn har exakt samma bredd.

Arbeta med kolumner

Du kan styra många aspekter av kolumnerna. I synnerhet kan kolonnbredderna anges i absoluta enheter som procentandelar eller ospecificerade. Kolonnbredden för ospecificerade kolumner är resten delad lika. Till exempel, för en tabellbredd på 100 px, en kolumn specificerad 15 px, en andra kolumn specificerad 25% (25 px) och en tredje kolumn specificerad 30% (15 px). 

Två andra kolumner angav inte en bredd. Kolumnerna 1, 2 och 3 använde 70 px tillsammans, vilket lämnar 30 px för kolumnerna 4 och 5, vilket kommer att dela upp det lika. Kolumn 4 och 5 kommer var och en att ha en bredd på 15 px. Observera att om tabellen ändras ändras numren. Endast kolumn 1 kommer alltid att vara 15 px bred. 

De övriga kolumnerna beräknas utifrån bordets bredd. Du kan också hantera justering av text och kolumner samt stilen på rubriker och kolumner. Här är ett exempel på hur du anger olika kolumnbredder, textjustering och anpassade stilar:

importera React Component från "reagera" import BootstrapTable, TableHeaderColumn från "reagera bootstrap-table" import "... /css/Table.css" import "... /dist/react-bootstrap-table-all.min. css-klass Tabell2 utökar komponent render () return ( 
   ID   namn   Värde   
 ) exportera standard tabell2

Styling ditt bord

Du såg hur man utformar enskilda kolumner och rubriker, men styling kan gå mycket längre. React-bootstrap-table ger många alternativ för anpassning. Först kan du helt enkelt lägga till de randiga och svänga attributen till BootstrapTable-komponenten för att få alternativa bakgrundsfärger på varje rad: 

För att stila alla rader, använd trClassName:  

Om du vill bli riktigt snygg kan trStyle fungera. Kolla in följande tabellkomponent som utformar olika rader där namnet är "George Michael":

importera React Component från "reagera" import BootstrapTable, TableHeaderColumn från "reagera bootstrap-table" import "... /css/Table.css" import "... /dist/react-bootstrap-table-all.min. css 'funktion rowClassNameFormat (rad, rowIdx) // rad är hel rad objekt // rowIdx är index för rad console.log (rad) returrad [' name '] ===' George Michael '? 'GeorgeMichael-Row': 'Other-Row';  klass Tabell 3 utökar komponent render () return ( 
   ID   namn   Värde   
 ) exportera standard tabell3 

De George-Rad och Andra raden CSS klasser definieras i Table.css:

.Tabellrubrik bakgrundsfärg: #ccc; färgen blå; vaddering: 10px; text-align: left;  .GeorgeMichael-Row bakgrundsfärg: plommon;  .Other-Row bakgrundsfärg: greenyellow; 

Väljer rader

När du har data i en tabell kanske du vill välja några rader för att kunna utföra vissa operationer på dem. React-bootstrap-table ger ett brett utbud av valmöjligheter. Alla alternativ är organiserade i ett enda objekt som du skickar till komponenten som selectRow attribut. Här är några av urvalsalternativen:

• singelvalsläge (radioknapp)
• flervalsläge (kryssrutan)
• konfigurerbar kolumnvalbredd
• välj på radklick: som standard måste du klicka på väljaren (radioknapp eller kryssrutan)
• dölja valkolumnen (användbar om valet på radklick är sant)
• ändra bakgrundsfärg på urvalet
• inledande valda rader
• valkrokar (på en rad eller när alla rader är valda).

Följande komponenter visar många av dessa alternativ:

importera React Component från "reagera" import BootstrapTable, TableHeaderColumn från "reagera bootstrap-table" import "... /css/Table.css" import "... /dist/react-bootstrap-table-all.min. css 'funktion påSelectRow (rad, isSelected, e) if (isSelected) alert (' Du har precis valt '$ rad [' name '] ") const selectRowProp = läge:' kryssrutan ', klickaToVälj: true , unselectable: [2], selected: [1], onSelect: onSelectRow, bgColor: 'gold'; klassen Table4 utökar komponent render () return 
   ID   namn   Värde   
 ) exportera standard tabell4

Slutsats

I den här delen skapade vi en enkel React-applikation med hjälp av React-create-app, tillagt React-Bootstrap-Table, fyllde en tabell med data, arbetade med kolumner, formaterade tabellen och valda rader. 

I nästa del fortsätter vi resan genom att expandera rader, lägga till rader, radera rader och täcka pagination, cellredigering och avancerad anpassning. Håll dig igång.