How to set a default cell value if no data present in react bootstrap table 2

Question

I have tables rendered across multiple places with multiple data sources, implemented with react-bootstrap-table2.

For this, I have created one single component <MyTable ... /> which ultimately renders <BootstrapTable .../> component.

Is there any way to apply a rule globally that if the whatever data being passed in has a blank value, a dash '-' should be rendered by default in that case?

Having formatter applied on columns of each and every table is not a good idea.

Answer 1

You can write a common nullChecker and use that for the column definitions where you might expect to have NO data.

1. You can still keep the common Bootstrap table

2. You will need to update the column definitions to add a formatter

3. The formatter takes a reference to your nullChecker and returns a value or a dash (-) based on if the value is present.

Have a look at this sandbox - https://codesandbox.io/embed/react-boot-table-defaultvalues-bpwgz

1. Table1 is a normal table with no missing data
2. Table2 has some missing data for 'From' and 'To' columns. The dash is shown if no value is present. For this, nullChecker from helper.js is used.