Can I render a Grid without the header row?

[Grant]

Hi team, 

As the title says, I have a use case where I want to render a Grid without the Header Row. My use case is i want to easily display a small grid (2 columns) and the header row is unnecessary and takes up space, the data speaks for itsself.

I tried to use the rows.data attr to conditionally ignore the header row, but it turns out that rows.data only executes for the data rows (obviously) and the only other optiosn are groupHEader and groupFooter.

Can you help at all?

Thanks,
Grant

[Vessy]

Hello, Grant,

You can hide the Grid row with a similar CSS style:

div.k-grid-header {
  display: none;
}

For convenience, I have prepared a sample demonstrating this approach - is this the result you are trying to achieve?

• https://stackblitz.com/edit/react-knugq9rv?file=app%2Fapp.jsx 

Regards,
Vessy
Progress Telerik

[Grant]

Thanks Vessy, I've chossen to go with a differnt appraoch to render the data. But your solution bring up a question.

Why the inconsistency? Any data row or groupHeader/groupFooter row can be conditionally rendered usign the rows prop, why not the header row?

[Vessy]

Hi, Grant,

Thank you for the shared feedback. I will pass your thoughts to our developers, meanwhile if you prefer to hide the header row via custom rendering, you can do it by implementing a custom header cells (instead of rows):

• https://stackblitz.com/edit/react-knugq9rv-cr3axdxe?file=app%2Fapp.jsx 

      <Grid
        style={{
          height: '475px',
        }}
        data={data}
        dataItemKey="ProductID"
        autoProcessData={true}
        cells={{
          headerCell: () => <></>,
        }}
      >