How to use @material/data-table - 10 common examples

import * as ripple from '@material/ripple/index';
import * as select from '@material/select/index';
import * as slider from '@material/slider/index';
import * as snackbar from '@material/snackbar/index';
import * as switchControl from '@material/switch/index';
import * as tabBar from '@material/tab-bar/index';
import * as tabIndicator from '@material/tab-indicator/index';
import * as tabScroller from '@material/tab-scroller/index';
import * as tab from '@material/tab/index';
import * as textField from '@material/textfield/index';
import * as topAppBar from '@material/top-app-bar/index';
// Register all components
autoInit.register('MDCCheckbox', checkbox.MDCCheckbox);
autoInit.register('MDCChip', chips.MDCChip);
autoInit.register('MDCChipSet', chips.MDCChipSet);
autoInit.register('MDCDataTable', dataTable.MDCDataTable);
autoInit.register('MDCDialog', dialog.MDCDialog);
autoInit.register('MDCDrawer', drawer.MDCDrawer);
autoInit.register('MDCFloatingLabel', floatingLabel.MDCFloatingLabel);
autoInit.register('MDCFormField', formField.MDCFormField);
autoInit.register('MDCGridList', gridList.MDCGridList);
autoInit.register('MDCIconButtonToggle', iconButton.MDCIconButtonToggle);
autoInit.register('MDCLineRipple', lineRipple.MDCLineRipple);
autoInit.register('MDCLinearProgress', linearProgress.MDCLinearProgress);
autoInit.register('MDCList', list.MDCList);
autoInit.register('MDCMenu', menu.MDCMenu);
autoInit.register('MDCMenuSurface', menuSurface.MDCMenuSurface);
autoInit.register('MDCNotchedOutline', notchedOutline.MDCNotchedOutline);
autoInit.register('MDCRadio', radio.MDCRadio);
autoInit.register('MDCRipple', ripple.MDCRipple);
autoInit.register('MDCSelect', select.MDCSelect);
autoInit.register('MDCSlider', slider.MDCSlider);

import * as select from '@material/select/index';
import * as slider from '@material/slider/index';
import * as snackbar from '@material/snackbar/index';
import * as switchControl from '@material/switch/index';
import * as tabBar from '@material/tab-bar/index';
import * as tabIndicator from '@material/tab-indicator/index';
import * as tabScroller from '@material/tab-scroller/index';
import * as tab from '@material/tab/index';
import * as textField from '@material/textfield/index';
import * as topAppBar from '@material/top-app-bar/index';

// Register all components
autoInit.register('MDCCheckbox', checkbox.MDCCheckbox);
autoInit.register('MDCChip', chips.MDCChip);
autoInit.register('MDCChipSet', chips.MDCChipSet);
autoInit.register('MDCDataTable', dataTable.MDCDataTable);
autoInit.register('MDCDialog', dialog.MDCDialog);
autoInit.register('MDCDrawer', drawer.MDCDrawer);
autoInit.register('MDCFloatingLabel', floatingLabel.MDCFloatingLabel);
autoInit.register('MDCFormField', formField.MDCFormField);
autoInit.register('MDCGridList', gridList.MDCGridList);
autoInit.register('MDCIconButtonToggle', iconButton.MDCIconButtonToggle);
autoInit.register('MDCLineRipple', lineRipple.MDCLineRipple);
autoInit.register('MDCLinearProgress', linearProgress.MDCLinearProgress);
autoInit.register('MDCList', list.MDCList);
autoInit.register('MDCMenu', menu.MDCMenu);
autoInit.register('MDCMenuSurface', menuSurface.MDCMenuSurface);
autoInit.register('MDCNotchedOutline', notchedOutline.MDCNotchedOutline);
autoInit.register('MDCRadio', radio.MDCRadio);
autoInit.register('MDCRipple', ripple.MDCRipple);
autoInit.register('MDCSelect', select.MDCSelect);
autoInit.register('MDCSlider', slider.MDCSlider);

}),
      notifySelectedAll: () => this.selectedAll.emit(),
      notifyUnselectedAll: () => this.unselectedAll.emit(),
      registerHeaderRowCheckbox: () => this._registerHeaderCheckbox(),
      registerRowCheckboxes: () => this._registerRowCheckboxes(),
      removeClassAtRowIndex: (rowIndex: number, className: string) =>
        this.getRows()[rowIndex].getNativeElement().classList.remove(className),
      setAttributeAtRowIndex: (rowIndex: number, attr: string, value: string) =>
        this.getRows()[rowIndex].getNativeElement().setAttribute(attr, value),
      setHeaderRowCheckboxChecked: (checked: boolean) => this._headerCheckbox!.checked = checked,
      setHeaderRowCheckboxIndeterminate: (indeterminate: boolean) =>
        this._headerCheckbox!.indeterminate = indeterminate,
      setRowCheckboxCheckedAtIndex: (rowIndex: number, checked: boolean) =>
        this.getRows()[rowIndex]._checkbox ? this.getRows()[rowIndex]._checkbox!.toggle(checked) : null
    };
    return new MDCDataTableFoundation(adapter);
  }

},
      setAttributeAtRowIndex: (rowIndex, attr, value) => {
        this.getRows()[rowIndex].setAttribute(attr, value);
      },
      setHeaderRowCheckboxChecked: checked => {
        this.headerRowCheckbox_.checked = checked;
      },
      setHeaderRowCheckboxIndeterminate: indeterminate => {
        this.headerRowCheckbox_.indeterminate = indeterminate;
      },
      setRowCheckboxCheckedAtIndex: (rowIndex, checked) => {
        this.rowCheckboxList_[rowIndex].checked = checked;
      },
    };

    this.foundation = new MDCDataTableFoundation(adapter);
    this.foundation.init();

    this.headerRow_ = this.$el.querySelector(`.${cssClasses.HEADER_ROW}`);
    this.handleHeaderRowCheckboxChange_ = () =>
      this.foundation.handleHeaderRowCheckboxChange();
    this.headerRow_.addEventListener(
      'change',
      this.handleHeaderRowCheckboxChange_,
    );

    this.content_ = this.$el.querySelector(`.${cssClasses.CONTENT}`);
    this.handleRowCheckboxChange_ = event =>
      this.foundation.handleRowCheckboxChange(event);
    this.content_.addEventListener('change', this.handleRowCheckboxChange_);

    this.layout();

        this.getRows().findIndex(_ => _.getNativeElement() === ((closest(el, strings.ROW_SELECTOR) as HTMLElement))),
      getSelectedRowCount: () => this.elementRef.nativeElement.querySelectorAll(strings.ROW_SELECTED_SELECTOR).length,

      getRowElements: () => [].slice.call(this.elementRef.nativeElement.querySelectorAll(strings.ROW_SELECTOR)),
      getRowIdAtIndex: (rowIndex: number) =>

useEffect(() => {
    MDCDataTable.attachTo(dataTable.current);
  });

const Cell = (props) => {
  const classes = classNames(cssClasses.CELL, {
    [cssClasses.CELL_NUMERIC]: props.isNumeric,
  }, props.classes);
  const { id } = props;

  return (
    {props.children}
  );
};

const Cell = (props) => {
  const classes = classNames(cssClasses.CELL, {
    [cssClasses.CELL_NUMERIC]: props.isNumeric,
  }, props.classes);
  const { id } = props;

  return (
    {props.children}
  );
};

const dataTable = React.createRef();

  useEffect(() => {
    MDCDataTable.attachTo(dataTable.current);
  });

  return (
    <div>
      
            {props.rowSelection ?  : null}
            {props.data.headers.map((header, index) =&gt; {header})}
          
                {props.rowSelection ?  : null}
                {row.map((content, index) =&gt; {
                  let id = index === 0 ? rowId : null;
                  return {content};
                })}
              <table>
        <thead>
          <tr></tr>
        </thead>
        <tbody></tbody></table>
          {props.data.rows.map((row, index) =&gt; {
            const isSelected = props.rowSelection ? props.data.selectedRowIndexes.indexOf(index) &gt;= 0 : false;
            const rowId = `u${idIncrement++}`;
            return (
              
            );
          })}
        </div>