Share
Detta är del två i en tvådels serie om React-Bootstrap-Table. I del ett 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 den här delen fortsätter vi resan genom att expandera rader, lägga till rader, radera rader och täcka paginering, cellredigering och avancerad anpassning.
Detta är en av de coolaste funktionerna i React-bootstrap-table. När du visar tabelldata finns det ofta ytterligare data som du kanske vill se på en eller två rader, men du kan inte visa all data för alla rader.
Ett alternativ att ta itu med är att visa verktygstips, men verktygstips kräver att du sveper med musen över målområdet, och du kan bara se en verktygstips åt gången. Genom att expandera rader kan du visa ytterligare data för varje rad i en typ av låda som stannar utökad så länge du vill, och du kan kollapsa tillbaka den när du är klar. Du kan expandera så många rader som du vill samtidigt. Så här är det gjort med React-bootstrap-table.
Kärlekskortet innehåller relationer mellan några arresterade utvecklingspersoner: Gob älskar Marta och Buster älskar Lucile 2. The isExpandable () funktionskontroller vilka rader som kan expanderas. I det här fallet returneras det sant för rader vars karaktärsnamn finns i kärlekskartan. De expandRow () funktionen returnerar en komponent när en rad expanderas.
Den returnerade komponenten visas under raden tills raden är kollapsad. Konfigurera rad expansion är lite knepigt. Vissa alternativ är bara rekvisita på BootstrapTable-komponenten.
Utvidgningskolumnternativen är en objektprotokoll, och då finns en prop kallad alternativ som innehåller ytterligare radexpansionsalternativ som expandRowBgColor och expandera. Det skulle vara mycket enklare om det bara fanns en prop kallad expandRowProp som innehöll alla alternativ (som selectRowProp).
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 'const loveMap = Gob:' Martha ', Buster:' Lucile 2 ', funktionen är ExpandableRow (rad) return row [' name '] i loveMap; funktionen expandRow (rad) return (rad ['namn'] älskar loveMap [rad ['namn']].
); klass Table5 utökar komponent render () const options = expandRowBgColor: 'rosa', expanderar: [1] // initialt expanderad returnera () exportera standard tabell5ID namn Värde
Hittills har vi bara visat tre rader med data. Tabellerna är utformade för att visa mycket data som inte nödvändigtvis passar på skärmen samtidigt. Det är där pagination kommer in. React-bootstrap-bordet stöder många paginationsalternativ.
Låt oss fylla vårt bord med 100 saker, vilket kommer att vara tio sidor av tio saker vardera. Vi använder en getData () -funktion som returnerar en rad 100 objekt med ids, namn och värden baserat på deras index.
Låt oss också ange vilken sida som ska visas i början (4), anpassa texten till föregående, nästa, första och sista sidan (med Unicode-pilar för extra kyla) och slutligen tillhandahålla en anpassad funktion som heter showTotal () för att visa det totala antalet poster. Observera att attributet för att styra den föregående sidoknappen heter "prePage" och inte "prevPage" (det fick mig). Alla paginationsalternativ går in i det allmänna alternativet "alternativ" i tabellen.
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 getData () var data = [] för (var i = 0; i < 100; ++i) data[i] = id: i, name: 'item_' + i, value: i return data function showTotal() returnDet finns 100 artiklar totalt
klass Tabell 6 utökar komponent render () const options = sida: 4, prePage: '⟵', nextPage: '⟶', firstPage: '⟸', lastPage: '⟹', paginationShowsTotal: showTotal return) exportera standard tabell6ID namn Värde
Hittills har vi använt tabellen för att visa information på olika sätt. Men tabeller kan användas som användargränssnitt för att manipulera data. Låt oss se hur du lägger till och tar bort rader från ett bord.
Nyckelattributen är insertRow och deleteRow. När du anger dem läggs "Ny" och "Ta bort" -knapparna till. Om du klickar på knappen "Ny" öppnas en modal dialog och låter dig lägga till nya rader. Om du klickar på knappen "Ta bort" raderas alla valda rader. För att radera rader måste du naturligtvis aktivera radval. Du kan också bifoga krokfunktioner som kallas efter att du har lagt till eller raderat rader.
Accentsconagua
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 onInsertRow (rad) let newRowStr = "för (const-prop i rad) newRowStr + = prop +': '+ rad [prop] +' \ n ' alert (' Du har lagt in: \ n '+ newRowStr ) funktionen påDeleteRow (rowKeys) alert ('Du raderade:' + rowKeys) klass Tabell 7 utökar komponent render () const options = afterInsertRow: onInsertRow, afterDeleteRow: onDeleteRow // För att radera rader kan du välja rader const selectRowProp = läge: 'kryssrutan' returnera ( ID namn Värde ) exportera standard tabell7
En annan form av datamanipulering är redigering på plats (t.ex. cellredigering). Cellredigeringen kan utlösas med ett klick eller dubbelklicka. Cellredigeringen styrs av attributet "cellEdit". Förutom läget kan du ange icke redigerbara rader och krokfunktioner.
I följande kod, den nonEditableRows funktionen returnerar helt enkelt radnyckeln 3, men kan använda en mer sofistikerad logik.
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 'class Table8 utökar komponent render () const cellEditProp = mode:' klick ', //' dbclick 'för trigger genom att dubbelklicka på nonEditableRows: function () return [3]; lämna tillbaka () exportera standard tabell8ID namn Värde
Ibland räcker inte dina data och spelar med det i ett webben-användargränssnitt, och du måste ta dina data och mata den till andra verktyg. Sättet att göra det med React-bootstrap-bordet är väldigt enkelt. Du lägger bara till exportCSV-attributet (och eventuellt ett filnamn) och en exportknapp läggs till. När du klickar på knappen kan du spara dina data till en CSV-fil.
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 Tabell 9 utökar komponent render () return () exportera standard tabell9ID namn Värde
Här är de exporterade uppgifterna från vårt lilla bord:
"4", "4", "5" "3", "George" 4, "Buster", "5" "3"
Vi täckte mycket material, men React-bootstrap-bordet har mycket mer i butik. Praktiskt taget kan varje aspekt anpassas. Läs hela dokumentationen om hur du anpassar ett bord.
Här är en lista över de anpassningsbara delarna:
React-bootstrap-tabellen packar ett kraftfullt slag. Det ger bort ett litet användargränssnitt för att visa, söka och manipulera tabelldata. API: n är mycket konsekvent-viktiga funktioner kan aktiveras genom att ange ett enkelt attribut och eventuellt anpassas med ytterligare attribut som ofta kan vara dynamiska funktioner.
Medan standardbeteendet och den grundläggande konfigurationen ska tillgodose de flesta användare, om du behöver mer avancerade funktioner och anpassning, finns det gott om dokumentation och exempel på hur du ska hantera det.
Under de senaste åren har React vuxit i popularitet. Faktum är att vi har ett antal objekt på marknaden som är tillgängliga för köp, granskning, genomförande och så vidare. Om du letar efter ytterligare resurser runt React, tveka inte att kolla in dem.
