Standard Bootstrap-Tabelle Größe

Question

Ich habe eine Bootstrap-Tabelle, die mehrere Header und eine addAction() Funktion hat, die push() die Informationen aus meiner API in der Tabelle. Alles funktioniert gut, außer wenn ich keine Informationen zu schieben habe, mein Tisch ist sehr klein und sieht nicht wirklich ästhetisch aus.

Standardmäßig legt Bootstrap-Tabelle die Tabellengröße sehr klein und schreibt Es gibt keine Daten zur Anzeige in der Tabelle. Ich möchte das durch einen Standardtabellengrößenwert ersetzen, der innen einfach leer ist.

Wo ich die Header machen und addAction()

return (
    <div onLoad={addAction(pageSize, this.props.data.viewer)}> 
     <BootstrapTable hover data={action} headerStyle={{ background: '#DEDEDE' }}> 
     <TableHeaderColumn dataField='process' width='200px'> 
      <p> 
      Process 
      </p> 
     </TableHeaderColumn> 
     </BootstrapTable> 
    </div> 
); 

addAction nennen()

function addAction (quantity, props) { 
    action = []; 
    for (let i = 0; i < quantity; i++) { 
    if (props.actions.items[i] != null) { 
     action.push({ 
     process: props.actions.items[i].request.process.description, 
     }); 
    } 
    } 
} 

Um es zusammenzufassen, wenn props.actions keine Elemente hat, habe ich ein leeres Raster anzeigen möchten mit einer festen Größe.

Ist es möglich und wenn ja, wie?

Dank

Answer 1

Es gibt nur wenige Eigenschaften von react-bootstrap-table, dass Sie die Höhe des Tisches einstellen können:

1. die Höhe des Tisches einstellen: reference

<BootstrapTable data={ data } height='120px'> 

2. Einstellen der Höhe der Header: reference

<BootstrapTable 
    headerStyle={{ height: 200px }}> 
    //... 
</BootstrapTable> 

3. Einstellen der Höhe des Körpers der Tabelle: reference

<BootstrapTable 
    bodyStyle={{ height: '200px' }}> 
    //... 
</BootstrapTable> 

Answer 2

Bootstrap-Tabelle gesamten Bereich des Elternelementes erfolgen kann.

Wenn Daten nicht kommen, dann machen Sie eine einzelne td in einer Tabelle und verwenden Sie colspan. Danach legte und leere Zeichenfolge zu diesem. dann wird die Größe in Ordnung sein. & nbsp

Answer 3

setzen Sie Ihre Logik in anderen Abschnitt. Wenn prop.actions.item nicht null ist, wird der Abschnitt ausgeführt. aber wenn es null, dann wird sonst Abschnitt ausgeführt. Dort können Sie Ihre Logik für das Geben von Nachrichten oder das Setzen von leerem td mit colspan setzen.

if (props.actions.items[i] != null) { 
      action.push({ 
      process: props.actions.items[i].request.process.description, 
      }); 
    else 
    { 
    do some thing here 
    }