I am utilizing grouped DetailsList Material UI part in customized SPFx webpart for displaying listing information.

https://developer.microsoft.com/en-us/cloth/#/controls/internet/detailslist/grouped

I must load gadgets of the group dynamically from the server by the API name, however cannot discover any out there group increase callbacks in DetailsList part with out there uncovered group props (title of the group, and so forth.) as a way parameter for constructing a request string. It ought to appear to be that:

https://contoso.sharepoint.com/website/_api/internet/Lists/getbytitle('ListTitle')/RenderListDataAsStream?@listUrl=&View=&IsGroupRender=TRUE&DrillDown=1&GroupString=%3B%23Exel%20Format%20Filespercent3B%23%3B%23&

Principally, I need to obtain conduct of the usual trendy Doc Library webpart present in Sharepoint 2019. Every other methods to realize this with DetailsList part?

Code pattern of the part (from documentation):

import * as React from 'react';
import {
  BaseComponent,
  DefaultButton,
  DetailsHeader,
  DetailsList,
  IColumn,
  IDetailsHeaderProps,
  IDetailsList,
  IGroup,
  IRenderFunction,
  IToggleStyles,
  mergeStyles,
  Toggle
} from 'office-ui-fabric-react';

const margin = '0 20px 20px 0';
const controlWrapperClass = mergeStyles({
  show: 'flex',
  flexWrap: 'wrap'
});
const toggleStyles: Partial<IToggleStyles> = {
  root: { margin: margin },
  label: { marginLeft: 10 }
};

export interface IDetailsListGroupedExampleItem {
  key: string;
  title: string;
  colour: string;
}

export interface IDetailsListGroupedExampleState {
  gadgets: IDetailsListGroupedExampleItem[];
  teams: IGroup[];
  showItemIndexInView: boolean;
  isCompactMode: boolean;
}
const _blueGroupIndex = 2;

export class DetailsListGroupedExample extends BaseComponent<{}, IDetailsListGroupedExampleState> {
  personal _root = React.createRef<IDetailsList>();
  personal _columns: IColumn[];

  constructor(props: {}) {
    tremendous(props);

    this.state = {
      gadgets: [
        { key: 'a', name: 'a', color: 'red' },
        { key: 'b', name: 'b', color: 'red' },
        { key: 'c', name: 'c', color: 'blue' },
        { key: 'd', name: 'd', color: 'blue' },
        { key: 'e', name: 'e', color: 'blue' }
      ],
      // That is based mostly on the definition of things
      teams: [
        { key: 'groupred0', name: 'Color: "red"', startIndex: 0, count: 2 },
        { key: 'groupgreen2', name: 'Color: "green"', startIndex: 2, count: 0 },
        { key: 'groupblue2', name: 'Color: "blue"', startIndex: 2, count: 3 }
      ],
      showItemIndexInView: false,
      isCompactMode: false
    };

    this._columns = [
      { key: 'name', name: 'Name', fieldName: 'name', minWidth: 100, maxWidth: 200, isResizable: true },
      { key: 'color', name: 'Color', fieldName: 'color', minWidth: 100, maxWidth: 200 }
    ];
  }

  public componentWillUnmount() {
    if (this.state.showItemIndexInView) {
      const itemIndexInView = this._root.present!.getStartItemIndexInView();
      alert('first merchandise index that was in view: ' + itemIndexInView);
    }
  }

  public render() {
    const { gadgets, teams, isCompactMode } = this.state;

    return (
      <div>
        <div className={controlWrapperClass}>
          <DefaultButton onClick={this._addItem} textual content="Add an merchandise" kinds={{ root: { margin: margin } }} />
          <Toggle label="Compact mode" inlineLabel checked={isCompactMode} onChange={this._onChangeCompactMode} kinds={toggleStyles} />
          <Toggle
            label="Present index of first merchandise in view when unmounting"
            inlineLabel
            checked={this.state.showItemIndexInView}
            onChange={this._onShowItemIndexInViewChanged}
            kinds={toggleStyles}
          />
        </div>
        <DetailsList
          componentRef={this._root}
          gadgets={gadgets}
          teams={teams}
          columns={this._columns}
          ariaLabelForSelectAllCheckbox="Toggle choice for all gadgets"
          ariaLabelForSelectionColumn="Toggle choice"
          onRenderDetailsHeader={this._onRenderDetailsHeader}
          groupProps={{
            showEmptyGroups: true
          }}
          onRenderItemColumn={this._onRenderColumn}
          compact={isCompactMode}
        />
      </div>
    );
  }

  personal _addItem = (): void => {
    const gadgets = this.state.gadgets;
    const teams = [...this.state.groups];
    teams[_blueGroupIndex].depend++;

    this.setState(
      {
        gadgets: gadgets.concat([
          {
            key: 'item-' + items.length,
            name: 'New item ' + items.length,
            color: 'blue'
          }
        ]),
        teams
      },
      () => {
        if (this._root.present) {
          this._root.present.focusIndex(gadgets.size, true);
        }
      }
    );
  };

  personal _onRenderDetailsHeader(props: IDetailsHeaderProps, _defaultRender?: IRenderFunction<IDetailsHeaderProps>) {
    return <DetailsHeader {...props} ariaLabelForToggleAllGroupsButton={'Broaden collapse teams'} />;
  }

  personal _onRenderColumn(merchandise: IDetailsListGroupedExampleItem, index: quantity, column: IColumn) {
    const worth = merchandise && column && column.fieldName ? merchandise[column.fieldName as keyof IDetailsListGroupedExampleItem] || '' : '';

    return <div data-is-focusable={true}>{worth}</div>;
  }

  personal _onShowItemIndexInViewChanged = (occasion: React.MouseEvent<HTMLInputElement>, checked: boolean): void => {
    this.setState({ showItemIndexInView: checked });
  };

  personal _onChangeCompactMode = (ev: React.MouseEvent<HTMLElement>, checked: boolean): void => {
    this.setState({ isCompactMode: checked });
  };
}