Changing the row height of DetailsList

Question

How can I change the row height for a DetailsList row? I can make the row compact by setting the parameter true? Can I reduce the height further, like a table row?

I tried to modify maxHeight in IDetailsRowStyle cell. But it still gives the same size.

Answer 1

Boy they don't make it easy do they? I had the same problem, and after many hours of experimentation finally stumbled upon the right combination. This will give you perfectly tight spacing on all cells so you can do whatever you want inside each cell. Hope this is still useful to you (or anyone else) 1.5 years later!

import * as React from 'react';
import { DetailsList, IDetailsHeaderProps, IDetailsListProps, IRenderFunction, ScrollablePane, Sticky } from '@fluentui/react';

export interface IDataGridProps extends IDetailsListProps
{
    RowHeight?: number
}

export class DataGrid extends React.Component<IDataGridProps>
{
    render()
    {
        return (
            <ScrollablePane>
                <DetailsList
                    cellStyleProps={{
                        cellLeftPadding: 0,
                        cellRightPadding: 0,
                        cellExtraRightPadding: 0,
                    }}
                    useReducedRowRenderer={this.props.useReducedRowRenderer}
                    compact={true}
                    onRenderDetailsHeader={
                        // tslint:disable-next-line:jsx-no-lambda
                        (detailsHeaderProps?: IDetailsHeaderProps, defaultRender?: IRenderFunction<IDetailsHeaderProps>) => (
                            <Sticky>
                                {defaultRender ? defaultRender(detailsHeaderProps) : (<></>)}
                            </Sticky>
                        )}
                    onRenderRow={(props, defaultRender) =>
                    {
                        if (!props)
                            return null;
                        props.styles = {
                            cell: {
                                paddingTop: 0,
                                paddingBottom: 0,
                                minHeight: 0,
                                height: this.props.RowHeight || 32,
                                alignSelf: "center"
                            },
                            root: {
                                height: this.props.RowHeight || 32,
                                minHeight: 0,
                                // Optionally draw your own grid lines here 
                                // because we used compact mode
                                //borderColor: "gray",
                                //borderWidth: "0px 0px 1px 0px",
                                //borderStyle: "solid"
                            },
                            checkCell: {
                                height: this.props.RowHeight || 32,
                                minHeight: 0
                            },
                        };
                        return defaultRender ? defaultRender(props) : (<></>);
                    }}
                    constrainMode={this.props.constrainMode}
                    layoutMode={this.props.layoutMode}
                    items={this.props.items || []}
                    columns={this.props.columns} />
            </ScrollablePane>);
    }
}

Note this also gives you sticky column headers (which I can't fathom why it isn't the default), but if you don't want you can remove the ScrollablePane and related.

And then, somewhere in your global CSS, you also need:

.ms-DetailsRow-check.ms-Check-checkHost {
    height: 100%;
}

otherwise the checkboxes won't properly align with the rows.

Answer 2

The culprit causing all the line issues is a css style called .ms-List-cell. If you put the following into your css to remove the min-height setting in ms-list-cell you can do something like the below to DetailsList

In your CSS

  {
      min-height: unset !important; /* Override the min-height property */
  }

in you JS

<DetailsList
    .....
  onRenderRow={(props, defaultRender) => {
    if (!props) return null;
    const customStyles = {
      cell: {
        lineHeight: "20px",
        maxHeight: 20,
        minHeight: 0,
        paddingTop: 0,
        paddingBottom: 0,
      },
      root: {
        lineHeight: "20px",
        maxHeight: 20,
        minHeight: 0,
        paddingTop: 0,
        paddingBottom: 0,
      },
    };
    return defaultRender ? defaultRender({ ...props, styles: customStyles }) : null;
  }}
    ......