React DataTable fails to change the font-size

Question

I work on a React app and there is a component using DataTable (reference is here ).

The default font-size looks too small so I want to change to make it look bigger.

I try to set the style to the table as the code below but it doesn't work.

Here is my code:

import React from 'react';
import ReactDOM from 'react-dom';
import DataTable from 'react-data-table-component';

export default class MyTable2 extends React.Component {
  constructor(props) {
    super(props);

    const data = [];

    for (var i = 0; i < 200; i++) {
      data.push({ id: i, title: 'Conan the Barbarian' + i, summary: 'Orphaned boy Conan is enslaved after his village is destroyed...', year: '1982', expanderDisabled: true, image: 'http://conan.image.png' })
    }

    this.state = {
      rs: data
    }
  }


  render() {        
    const columns = [
      {
        name: 'Title',
        selector: 'title',
        sortable: true,
      },
      {
        name: 'Year',
        selector: 'year',
        sortable: true
      },
    ];

    const handleChange = (state) => {
      console.log('Selected Rows: ', state.selectedRows);
    };

    let styleobj = { "font-size": "25px" } //try to set the font-size here

    return (
      <DataTable
        className="dataTables_wrapper"
        title="Arnold Movies"
        columns={columns}
        data={this.state.rs}
        selectableRows // add for checkbox selection
        onTableUpdate={handleChange}
        pagination
        style={styleobj}
      />
    )
  }
}

Is there anyone here can suggest me a solution?

Thank you in advanced.

Answer 1

Hi @humanbean answer is correct, you can fix the inline stile or, if you want, you also can set the style directly in your app.css

Based on your custom classname (.dataTables_wrapper) I think that this css should work.

.dataTables_wrapper .rdt_TableCell{
  font-size:25px;
}

this is the className used by react-data-table-component

rdt_Table
rdt_TableRow
rdt_TableCol
rdt_TableCol_Sortable
rdt_TableCell
rdt_TableHeader
rdt_TableFooter
rdt_TableHead
rdt_TableHeadRow
rdt_TableBody
rdt_ExpanderRow

Answer 2

Can you try this

// Override the row font size
const myNewTheme= {
  rows: {
    fontSize: '25px'
  }
}

<DataTable
        className="dataTables_wrapper"
        title="Arnold Movies"
        columns={columns}
        data={this.state.rs}
        selectableRows // add for checkbox selection
        onTableUpdate={handleChange}
        pagination
        customTheme={myNewTheme}
      />

Theme reference Source file

If you want to change an individual cell font size, you can do this

const columns = [
      {
        name: 'Title',
        selector: 'title',
        sortable: true,
        cell: row => <div style={{fontSize: 25}}>{row.title}</div>
      }]