How to customize the column title style in Details list

Question

How can I change the font size and padding of the title cell in details list. I am using onRenderDetailsHeader prop to customize header render.

private renderDetailsHeader = (detailsHeaderProps: IDetailsHeaderProps) => {
    return (
      <DetailsHeader
        {...detailsHeaderProps}
        onRenderColumnHeaderTooltip={this.renderCustomHeaderTooltip}
      />
    );
  }

private renderCustomHeaderTooltip = (tooltipHostProps: ITooltipHostProps) => {
  return (
    <span
      style={{
        display: "flex",
        fontFamily: "Tahoma",
        fontSize: "10px",
        justifyContent: "left",
        paddingLeft: '0 px'
      }}
    >
      {tooltipHostProps.children}
   </span>
  );
}

Codepen

score 3 · Answer 1 · answered Dec 04 '20 at 10:30

3

You can use the IDetailsColumnStyles interface to style the header cells.

Example:

...

  const headerStyle: Partial<IDetailsColumnStyles> = {
    cellTitle: {
      color: theme.palette.orange,
    }
  }

  const columns: IColumn[] = [
    { styles: headerStyle, key: 'name', name: 'Name', fieldName: 'name', minWidth: 100,},

...

answered Dec 04 '20 at 10:30

Phierru

219
2
5

How do we style the rows? @Phierru – Kitwradr Jun 29 '21 at 19:47
Use the onRenderRow property. See below. – Phierru Jul 02 '21 at 14:17
This should be the selected answer – Harinarayanan Jun 15 '23 at 17:43

score 2 · Accepted Answer · answered Jun 17 '20 at 10:02

2

In IDetailsHeaderProps['columns'] or simply IColumn[] => IColumn has 'headerClassName' key where you can specify the necessary styles to each of the column.

answered Jun 17 '20 at 10:02

Subhash PVRC

36
1

score 2 · Answer 3 · answered Jul 02 '21 at 14:20

Style the Row:

...

const renderRow: IDetailsListProps['onRenderRow'] = props => {
  const rowStyles: Partial<IDetailsRowStyles> = {
    root: {
      borderBottomColor: theme.semanticColors.buttonBorder,
      fontSize: theme.fonts.medium.fontSize,
    },
    cell: { paddingLeft: 0, },
  }
  if (!props) return null
  return <DetailsRow {...props} styles={rowStyles} />
}

return (
  <DetailsList
    compact
    items={items}
    columns={columns}
    selectionMode={SelectionMode.none}
    layoutMode={DetailsListLayoutMode.justified}
    constrainMode={ConstrainMode.horizontalConstrained}
    onRenderRow={renderRow}
    onRenderDetailsHeader={renderHeader}
    onRenderItemColumn={renderItemColumn}
    setKey="set"
    ariaLabelForSelectionColumn="Toggle selection"
    ariaLabelForSelectAllCheckbox="Toggle selection for all items"
    checkButtonAriaLabel="Row Checkbox"
  />
)

...

how do we style the rows just like header? I thought `onRenderRow` was for the rows and not the header @Phierru — Kitwradr, Jul 02 '21 at 15:03

How to customize the column title style in Details list

3 Answers3