inovua react data grid- change default font size

user_11972470 0
Viewed 471

I'm working on a project that uses the React Data Grid (inovua), and I can't find any documentation on their API reference page or online about how to change the default font size of the data within cells.

I'm trying to fit a good amount of text into each cell/column, but I don't have enough space for a large grid, so the text needs to be smaller.

Any help would be much appreciated. Thanks!

react-data-grid reactjs
1 Answers

I just changed the example from the official documentation:

import React, { useState } from 'react'

import ReactDataGrid from '@inovua/reactdatagrid-enterprise'
import '@inovua/reactdatagrid-enterprise/index.css'

import CheckBox from '@inovua/reactdatagrid-community/packages/CheckBox'

import people from './people'

const gridStyle = { minHeight: 550, fontSize: 20 } // <-- look here

const rowStyle = ({ data }) => {
  const colorMap = {
    ca: '#7986cb',
    uk: '#ef9a9a'
  }

  return {
    fontSize: 10, // <-- or here
    color: colorMap[data.country]
  }
}

const columns = [
  { name: 'id', header: 'Id', defaultWidth: 100, type: 'number' },
  { name: 'name', header: 'Name', flex: 1 },
  { name: 'country', header: 'Country', flex: 1 },
  { name: 'city', header: 'City', flex: 1 },
  { name: 'age', header: 'Age', defaultWidth: 150, type: 'number' }
];

const App = () => {
  const [showZebraRows, setShowZebraRows] = useState(true);

  return (
    <div>
      <h3>Customized row styling - Canada rows are in twilight font color, UK rows in pink</h3>
      <CheckBox
        style={{ marginBottom: 20 }}
        checked={showZebraRows}
        onChange={setShowZebraRows}
      >
        Show zebra rows.
      </CheckBox>
      <ReactDataGrid
        idProperty="id"
        style={gridStyle}
        rowStyle={rowStyle}
        columns={columns}
        showZebraRows={showZebraRows}
        dataSource={people}
      />
    </div>
  );
}

export default () => <App />

Also read this :)

user_165932750
Related