💡 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 (
    <div>
      <ReactDataGrid
        idProperty="id"
        style={gridStyle}
        headerProps={headerProps}
        columns={columns}
        dataSource={people}
      />
    </div>
  );
}

export default () => <App />

• 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)