برای اینکار کامپوننت MaterialTable یک قابلیت به نام detailPanel دارد که اطلاعات اضافه تری را نمایش می دهد.

function MultipleDetailPanels() {
  return (
    <MaterialTable
      title="Multiple Detail Panels Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'lastname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
      
      data={[
        { name: 'Sara', lastname: 'Jam', birthYear: 1987 },
      ]}
      detailPanel={[
        {
          icon: 'circle',
          tooltip: 'Show Name',
          render: rowData => {
            return (
              <div
                style={{
                  fontSize: 100,
                  textAlign: 'center',
                  color: 'white',
                  backgroundColor: '#6F765',
                }}
              >
                {rowData.name}
              </div>
            )
          },
        },
       },
      ]}
    />
  )
}

در icon  عکس آیکون را می دهیم. هنگامی که کاربر موس  را بر روی این آیکون قرار دهید عبارتی که در tooltip قرار دادیم نمایش داده می  شود.
ممکن است بخواهیم با کلیک برروی هر سطر جدول یک ویدیو نمایش داده شود.برای اینکار بصورت زیر عمل می کنیم.

function DetailPanelWithRowClick() {
  return (
    <MaterialTable
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'lastname', field: 'lastname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
       
      ]}
      data={[
        { name: 'Sara', lastname: 'Jam', birthYear: 2000},
        { name: 'Sam', lastname: 'Rad', birthYear: 1950},
      ]}
      title="Detail Panel With RowClick Preview"
      detailPanel={rowData => {
        return (
          <iframe
            width="100%"
            height="315"
            src="https://www.youtube.com/embed/C0DPdy98e4c"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          />
        )
      }}
      onRowClick={(event, rowData, togglePanel) => togglePanel()}
    />
  )
}