Inovua React Data Grid - change pre-built styling, like ellipsis padding

Question

I'm using the Inovua React Data Grid for a project, and we are trying to make some subtle changes to increase the amount of data we can see on a smaller grid. We only have limited space, so we're trying to remove unnecessary clutter. I have been struggling to find any answers to my questions on the API reference documentation, which in my opinion is quite lacking.

1. Trying to decrease the padding- I believe there is a default padding of 8px within the grid, but seemingly nowhere to change it. I want to trim it down a bit, so it appears more like an Excel sheet.
2. I want to remove the header ellipsis!! There literally is a page in their reference docs for this (columns.headerEllipsis), but it just doesn't work when I try it. Perhaps they're demo/example is just awful, but I try adding headerEllipsis: false as a column property and my terminal tells me it 'isn't a known property'.
3. This seems like bad design on their part, but when a column/data gets trimmed (with or without ellipsis) because the text is too long, hovering over it does not display the entire text. Is there no way to change this?

I have considered writing a custom header render function to specifically change the ellipsis style settings to solve (2) as well as to render the headers as a tooltip to solve (3), but this seems excessive. Is there a better way to do this?

Thanks!

Answer 1

Still unable to solve the padding issue (1), but I was able to easily resolve (2) and (3) by building that custom header render function after all. It wasn't difficult, here is what I did:

const getHeader = (name: string) => {  
  return (cellProps: CellProps) => {
    cellProps.headerEllipsis = false;    // disables ellipsis

    return <div>
      <Tooltip title={name}>            {/* material-ui Tooltip: */}
        <span>{name}</span>             {/* displays text on hover */}
      </Tooltip>
    </div>
   }
 };

And then I just added this line where I defined columns:

name: e,
header: getHeader(e),           // add this line

By defining the custom header render function, it also overwrites a lot of the default styles (i.e. headerEllipsis). This actually made it much easier to adjust the spacing and shrink the columns in the grid, so even though I couldn't find the solution to (1), this custom render function is definitely the way to go!