💡 Customize height of header row & filter row

[patrick-y-pokeratlas]

I've got a design requirement for a header row height of 56px with a filter row height of 64px.

• Setting $INOVUA_DATAGRID_FILTER_ROW_HEIGHT does not increase the filter row height:

  $DATAGRID_THEME_NAME: 'custom-light';
  $INOVUA_DATAGRID_FILTER_ROW_HEIGHT: 56px;
  @import '@inovua/reactdatagrid-community/style/theme/default-light/index.scss';

• Using example code from the documentation, I was unable to change the height of the header row using headerProps:

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

import people from './people'

const gridStyle = { minHeight: 550 } const headerProps = { style: { height: 56, background: 'tomato', color: 'white' } }

const columns = [ { name: 'id', header: 'Id', defaultVisible: false, type: 'number', defaultWidth: 80 }, { name: 'name', defaultFlex: 1, header: 'Name' }, { name: 'country', defaultFlex: 1, header: 'Country' }, { name: 'city', defaultFlex: 1, header: 'City' }, { name: 'age', type: 'number', defaultFlex: 1, header: 'Age ' } ]

const App = () => { return (

); }

export default () =>

- I was able to set the height of both the header row and the filter row by using css overrides (after a lot of searching through the source code), but the increased size blocks the first row of data (i.e. the data rows do not move down to accommodate the increased height)