Search code examples
javascriptreactjsdatatablematerial-uimaterial-table

Material table for react font size is way too small


I am a newbie using react, used material-table for my project

however the font size is way to small for my liking, Image is attached below enter image description here enter image description here I would like to increase the font size of the table.

here is the code

state = {
      columns: [
        { title: "ID", field: "id", type: "numeric" },
        { title: "Title", field: "title" },
        { title: "Active", field: "active", type: "boolean" },
        { title: "# Questions", field: "number_of_questions" }
      ],
      data: [
        { id: 1, title: "First Survey", active: true, number_of_questions: 9 },
        { id: 2, title: "Second Survey", active: false, number_of_questions: 8 }
      ]
    };
render() {
    return (
      <div className="example-box-wrapper">
        <div className="adjust example-box-wrapper">
          <div id="dynamic-table-example-1_wrapper">
            <MaterialTable
              title="All Surveys"
              columns={this.state.columns}
              data={this.state.data}
              editable={{
                onRowAdd: newData => this.addNew(newData),
                onRowUpdate: (newData, oldData) =>
                  this.update(newData, oldData),
                onRowDelete: oldData => this.delete(oldData)
              }}
            />
          </div>
        </div>
      </div>
    );
  }

please help


Solution

  • <MaterialTable
      ...
      options={{
        rowStyle: {
          fontSize: 24,
        }
      }}
    />
    

    Try adding the options prop. Please refer to the docs for additional styling options.