CODEWITHSUNDEEP
office-ui-fabric
Jorge Aguirre
Jorge Aguirre

Reputation: 2857

How can I make an entire row clickable in a DetailsList component? (office-ui-fabric)

I've been using the DetailsList component but haven't found a way to make an entire row clickable - is there a sample code snippet or pointers on how this can be achieved?

https://developer.microsoft.com/en-us/fabric#/components/detailslist

Upvotes: 3

Views: 6536

Answers (4)

Snowball
Snowball

Reputation: 1512

Use onRenderRow and cloneElement to attach an onClick listener:

import React, { useCallback, cloneElement } from 'react';
import { DetailsList } from '@fluentui/react';

const Component = () => {

    const onItemInvoked = useCallback( ( item ) => {

        console.log( item );

    }, [] );

    const onRenderRow = useCallback( ( row, defaultRender ) => {

        return cloneElement( defaultRender( row ), { onClick: () => onItemInvoked( row.item ) } )

    }, [ onItemInvoked ] );

    return (
        <DetailsList
            onRenderRow={ onRenderRow }
        />
    );

};

Upvotes: 2

Yasir Ali
Yasir Ali

Reputation: 131

Here is th e single click solution, Use onActiveItemChanged prop like:

const _onActiveItemChanged = (item): void => {
    alert(`Item invoked: ${JSON.stringify(item)}`);
  };

here is the DetailList

<DetailsList
      items={assessmentList}
      compact={false}
      columns={columns}
      onActiveItemChanged={_onActiveItemChanged } 
/>

Upvotes: 5

Syed Danial
Syed Danial

Reputation: 655

Please onItemInvoked Property and method. But it works on double click. I am also looking for single click solution

  const onItemInvoked = (item): void => {
    alert(`Item invoked: ${JSON.stringify(item)}`);
  };
    <DetailsList
      items={assessmentList}
      compact={false}
      columns={columns}
      selectionMode={SelectionMode.multiple}
      getKey={_getKey}
      setKey="multiple"
      layoutMode={DetailsListLayoutMode.justified}
      checkboxVisibility={CheckboxVisibility.hidden}
      isHeaderVisible={true}
      selectionPreservedOnEmptyClick={false}
      enterModalSelectionOnTouch={true}
      ariaLabelForSelectionColumn="Toggle selection"
      ariaLabelForSelectAllCheckbox="Toggle selection for all items"
      checkButtonAriaLabel="Select Checkbox"
      onRenderRow={onRenderRow}
      onItemInvoked={onItemInvoked}
      onRenderDetailsHeader={(headerProps, defaultRender) => {
        return (
          <Sticky
            stickyPosition={StickyPositionType.Header}
            isScrollSynced={true}
            stickyBackgroundColor="transparent"
          >
            <div className="text-center">{defaultRender(headerProps)}</div>
          </Sticky>
        );
      }}
    />

Upvotes: 0

Jorge Aguirre
Jorge Aguirre

Reputation: 2857

Overriding onRenderRow worked for me. 

const _columns: IColumn[] = [
  {
    key: 'name',
    name: 'Name',
    fieldName: 'name',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true
  },
  {
    key: 'value',
    name: 'Value',
    fieldName: 'value',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true,
  }
];

const _items = Array.apply(null, Array(10)).map((_: any, num: number) => ({
  key: num.toString(),
  name: `Item ${num.toString()}`,
  value: num.toString()
}));

class Content extends React.Component {
  private _renderRow(props: Fabric.IDetailsRowProps, defaultRender: any): JSX.Element {
     return (
      <Fabric.DetailsRow {...props} onClick={() => alert('click')}/>
     );
   }

  public render() {
    return (
      <Fabric.Fabric>
          <Fabric.DetailsList
            items={ _items } 
            columns={ _columns.concat(..._columns, ..._columns, ..._columns) }
            onRenderRow={this._renderRow}
          />        
      </Fabric.Fabric>
    );
  }
}

ReactDOM.render( 
  <Content />,
  document.getElementById('content')
);

Upvotes: 4

Related Questions