How do I get a react-bootstrap-table2 caption to be above the table instead of below it?

Question

I tried using the code in the react-bootstrap-table2 "Table with caption" example, but my caption is below the table. I found this answer: "That's because bootstrap 4 has default caption css style - caption-side: bottom", but it's not about react-bootstrap-table2 and it doesn't give an example. Then I found this page: caption-side.

So I created tables.css:

.top caption {
  caption-side: top;
}

I imported it using import './tables.css';. And I added the class name to my table:

    <BootstrapTable
      className="top"
      bootstrap4={ true }
      caption={ <CaptionElement /> }
      keyField='id'
      data={ data.team.bids }
      columns={ columns }
      striped
      hover />

But the caption is still under the table.

How do I get the caption to be above the table?

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

The caption prop on bootstrap-table-next works as a plain HTML caption tag. I created a sample sandbox to play with placement of caption for the table.

Observations:

Using the same demo caption element from the storybook, I was able to change placement of caption on top or bottom.

Note that the caption tag renders inside a div with class 'table' and NOT top. To achive that, adding below style (with keeping the same JS) would place your caption above/below the table -

table caption {
  caption-side: top;
}

Sandbox link - https://codesandbox.io/embed/react-boot-table-caption-placement-1mvql

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 20 '19 at 18:07

pritam

2,452
1
21
31

That worked! Thank you! How could I have figured out your observation #2 myself? – Daryl Spitzer Sep 21 '19 at 18:53
You could always inspect the html elements in the browser developer tools. – pritam Sep 21 '19 at 18:59

How do I get a react-bootstrap-table2 caption to be above the table instead of below it?

1 Answers1