title: Implementing React table expanded rows
body: <p>It's my first time to use react-table librabry. I am struggling for the previous couple of days how to implement the expansion functionality using useExpanded hook</p>
  <p>Docs and all the examples available are not clear about that so, here is my code and hope if somone can give me a hand in that</p>
  <pre><code>const accountData = [
    {
      company: &quot;621bb1bda49c57b938fb9b8c&quot;,
      country: &quot;6228dac2ad9aef4e064906c3&quot;,
      accountName: &quot;Oriana Hospital&quot;,
      accountType: &quot;Hospital &quot;,
      city: &quot;Sharjah&quot;,
      area: &quot;Al Khan&quot;,
      street: &quot;Al Taawun&quot;,
      location: &quot;https://goo.gl/maps/Jx6oTCbXyq9C8Mrt7&quot;,
      hasBranches: true,
      numberOfDoctors: null,
      accountNotes: [],
      numberOfBranches: 1,
      expand: false,
      branches: [
        {
          branchName: &quot;Oriana Pulman &quot;,
          branchType: &quot;Hospital &quot;,
          branchCity: &quot;Sharjah&quot;,
          branchArea: &quot;Sharjah&quot;,
          branchStreet: &quot;Al Khan&quot;,
          branchLocation: &quot;Al Taawun&quot;,
          _id: &quot;622e2f05cc18e17eb608541a&quot;,
        },
      ],
      _id: &quot;622e2f04cc18e17eb6085419&quot;,
    },
    {
      company: &quot;621bb1bda49c57b938fb9b8c&quot;,
      country: &quot;6228dac2ad9aef4e064906c3&quot;,
      accountName: &quot;Ajman Speciality&quot;,
      accountType: &quot;Hospital &quot;,
      city: &quot;Ajman&quot;,
      area: &quot;Ajman&quot;,
      street: &quot;Al Ittihad Road&quot;,
      location: &quot;https://goo.gl/maps/9aizJaNxT7iMDVry6&quot;,
      hasBranches: false,
      numberOfDoctors: null,
      accountNotes: [],
      numberOfBranches: 0,
      expand: false,
      branches: [],
      _id: &quot;622e2f05cc18e17eb608541b&quot;,
    },
    {
      company: &quot;621bb1bda49c57b938fb9b8c&quot;,
      country: &quot;6228dac2ad9aef4e064906c3&quot;,
      accountName: &quot;Al Ittihad Medical Center&quot;,
      accountType: &quot;Clinic&quot;,
      city: &quot;Ajman&quot;,
      area: &quot;Al Swan&quot;,
      street: &quot;Ittihad &quot;,
      location: &quot;https://goo.gl/maps/ppLNbPB9CdGWqFpy6&quot;,
      hasBranches: false,
      numberOfDoctors: null,
      accountNotes: [],
      numberOfBranches: 0,
      expand: false,
      branches: [],
      _id: &quot;622e2ff2a2c75bcb9aaf640e&quot;,
    },
    {
      company: &quot;621bb1bda49c57b938fb9b8c&quot;,
      country: &quot;6228dac2ad9aef4e064906c3&quot;,
      accountName: &quot;Al Zaora Medical Center&quot;,
      accountType: &quot;Clinic&quot;,
      city: &quot;Ajman&quot;,
      area: &quot;Al Swan&quot;,
      street: &quot;Ittihad &quot;,
      location: &quot;https://goo.gl/maps/PZr5PqFf28rpdgYJ7&quot;,
      hasBranches: false,
      numberOfDoctors: null,
      accountNotes: [],
      numberOfBranches: 0,
      expand: false,
      branches: [],
      _id: &quot;622e2ff2a2c75bcb9aaf640f&quot;,
    },
    {
      company: &quot;621bb1bda49c57b938fb9b8c&quot;,
      country: &quot;6228dac2ad9aef4e064906c3&quot;,
      accountName: &quot;Amina Hospital&quot;,
      accountType: &quot;Hospital &quot;,
      city: &quot;Ajman&quot;,
      area: &quot;Al Swan&quot;,
      street: &quot;Ittihad &quot;,
      location: &quot;https://goo.gl/maps/Bxn7tedGQxUZFNqa8&quot;,
      hasBranches: true,
      numberOfDoctors: null,
      accountNotes: [],
      numberOfBranches: 3,
      expand: false,
      branches: [
        {
          branchName: &quot;Ibn Sina &quot;,
          branchType: &quot;Clinic&quot;,
          branchCity: &quot;Ajman&quot;,
          branchArea: &quot;Al Swan&quot;,
          branchStreet: &quot;Ittihad&quot;,
          branchLocation: &quot;https://goo.gl/maps/M3WemaX4ehbp6rSS6&quot;,
          _id: &quot;622e2ff2a2c75bcb9aaf6411&quot;,
        },
        {
          branchName: &quot;Amina Al Jurf&quot;,
          branchType: &quot;Clinic&quot;,
          branchCity: &quot;Ajman&quot;,
          branchArea: &quot;Al Jurf&quot;,
          branchStreet: &quot;Sheikh Khalifa&quot;,
          branchLocation: &quot;https://goo.gl/maps/VGgU5TGSBvaUnGqm6&quot;,
          _id: &quot;622e2ff2a2c75bcb9aaf6412&quot;,
        },
        {
          branchName: &quot;Family Medical Center&quot;,
          branchType: &quot;Clinic&quot;,
          branchCity: &quot;Ajman&quot;,
          branchArea: &quot;Ajman&quot;,
          branchStreet: &quot;Industiral Ajman&quot;,
          branchLocation: &quot;https://goo.gl/maps/wvqTbtuRakzaYTWg7&quot;,
          _id: &quot;622e2ff2a2c75bcb9aaf6413&quot;,
        },
      ],
      _id: &quot;622e2ff2a2c75bcb9aaf6410&quot;,
    },
    {
      company: &quot;621bb1bda49c57b938fb9b8c&quot;,
      country: &quot;6228dac2ad9aef4e064906c3&quot;,
      accountName: &quot;Al Garhoud Private Hospital&quot;,
      accountType: &quot;Hospital &quot;,
      city: &quot;Dubai&quot;,
      area: &quot;Al Garhoud&quot;,
      street: &quot;Reiyadh&quot;,
      location: &quot;https://goo.gl/maps/LVpuJhMBT2MrobPT6&quot;,
      hasBranches: true,
      numberOfDoctors: null,
      accountNotes: [],
      numberOfBranches: 1,
      expand: false,
      branches: [
        {
          branchName: &quot;Al Garhoud 2&quot;,
          branchType: &quot;Hospital &quot;,
          branchCity: &quot;Dubai&quot;,
          branchArea: &quot;Mirdif&quot;,
          branchStreet: &quot;Sheikh Mohamed Bin Zayed&quot;,
          branchLocation: &quot;https://goo.gl/maps/p2bKwpnBuLaH2yxS8&quot;,
          _id: &quot;622e2ff2a2c75bcb9aaf6415&quot;,
        },
      ],
      _id: &quot;622e2ff2a2c75bcb9aaf6414&quot;,
    },
    {
      company: &quot;621bb1bda49c57b938fb9b8c&quot;,
      country: &quot;6228dac2ad9aef4e064906c3&quot;,
      accountName: &quot;Emirates Hospital&quot;,
      accountType: &quot;Hospital &quot;,
      city: &quot;Dubai&quot;,
      area: &quot;Jumeirah&quot;,
      street: &quot;Al Wasl&quot;,
      location: &quot;https://goo.gl/maps/gqHVMFvhpnGgDCiL8&quot;,
      hasBranches: true,
      numberOfDoctors: null,
      accountNotes: [],
      numberOfBranches: 2,
      expand: false,
      branches: [
        {
          branchName: &quot;Emirates Marina&quot;,
          branchType: &quot;Hospital &quot;,
          branchCity: &quot;Dubai&quot;,
          branchArea: &quot;Marina&quot;,
          branchStreet: &quot;Marina&quot;,
          branchLocation: &quot;https://goo.gl/maps/p2bKwpnBuLaH2yxS8&quot;,
          _id: &quot;622e2ff2a2c75bcb9aaf6417&quot;,
        },
        {
          branchName: &quot;Emirates Clinic&quot;,
          branchType: &quot;Clinic&quot;,
          branchCity: &quot;RAK&quot;,
          branchArea: &quot;RAK&quot;,
          branchStreet: &quot;Khalid street &quot;,
          branchLocation: &quot;https://goo.gl/maps/NMN68z5VqB9AoUKS7&quot;,
          _id: &quot;622e2ff2a2c75bcb9aaf6418&quot;,
        },
      ],
      _id: &quot;622e2ff2a2c75bcb9aaf6416&quot;,
    },
    {
      company: &quot;621bb1bda49c57b938fb9b8c&quot;,
      country: &quot;6228dac2ad9aef4e064906c3&quot;,
      accountName: &quot;Al Shams Medical Diagnsotice Center&quot;,
      accountType: &quot;Group&quot;,
      city: &quot;Sharjah&quot;,
      area: &quot;Industrial area&quot;,
      street: &quot;Shams&quot;,
      location: &quot;https://g.page/alshamsmedicalgroup?share&quot;,
      hasBranches: true,
      numberOfDoctors: null,
      accountNotes: [],
      numberOfBranches: 2,
      expand: false,
      branches: [
        {
          branchName: &quot;Al Shams Al Jadeed &quot;,
          branchType: &quot;Clinic&quot;,
          branchCity: &quot;Sharjah&quot;,
          branchArea: &quot;Industrial Sharjah&quot;,
          branchStreet: &quot;Demuscus&quot;,
          branchLocation: &quot;https://goo.gl/maps/ZbEn1or58nYKhvSK9&quot;,
          _id: &quot;622e2ff2a2c75bcb9aaf641a&quot;,
        },
        {
          branchName: &quot;Al Shams Clinic&quot;,
          branchType: &quot;Clinic&quot;,
          branchCity: &quot;Sharjah&quot;,
          branchArea: &quot;Industrial 3&quot;,
          branchStreet: &quot;unknown street&quot;,
          branchLocation: &quot;https://goo.gl/maps/391Dz4B4EkxASjjm6&quot;,
          _id: &quot;622e2ff2a2c75bcb9aaf641b&quot;,
        },
      ],
      _id: &quot;622e2ff2a2c75bcb9aaf6419&quot;,
    },
    {
      company: &quot;621bb1bda49c57b938fb9b8c&quot;,
      country: &quot;6228dac2ad9aef4e064906c3&quot;,
      accountName: &quot;Ibn Batuta DrugStore&quot;,
      accountType: &quot;Drugstore&quot;,
      city: &quot;Sharjah&quot;,
      area: &quot;Al Nema&quot;,
      street: &quot;Al Nema&quot;,
      location: &quot;https://goo.gl/maps/6jka7BaGCguTXTza7&quot;,
      hasBranches: false,
      numberOfDoctors: null,
      accountNotes: [],
      numberOfBranches: 0,
      expand: false,
      branches: [],
      _id: &quot;622e2ff2a2c75bcb9aaf641c&quot;,
    },
    {
      company: &quot;621bb1bda49c57b938fb9b8c&quot;,
      country: &quot;6228dac2ad9aef4e064906c3&quot;,
      accountName: &quot;Tamimi Drug Store&quot;,
      accountType: &quot;Drugstore&quot;,
      city: &quot;Sharjah&quot;,
      area: &quot;Industrial area&quot;,
      street: &quot;Industrial &quot;,
      location: &quot;https://goo.gl/maps/ybWjXf2ZTBCsi5r68&quot;,
      hasBranches: false,
      numberOfDoctors: null,
      accountNotes: [],
      numberOfBranches: 0,
      expand: false,
      branches: [],
      _id: &quot;622e2ff2a2c75bcb9aaf641d&quot;,
    },
    {
      company: &quot;621bb1bda49c57b938fb9b8c&quot;,
      country: &quot;6228dac2ad9aef4e064906c3&quot;,
      accountName: &quot;Al Zaora Pharmacy&quot;,
      accountType: &quot;Pharmacy&quot;,
      city: &quot;Ajman&quot;,
      area: &quot;Al Swan&quot;,
      street: &quot;Ittihad &quot;,
      location: &quot;https://goo.gl/maps/PZr5PqFf28rpdgYJ7&quot;,
      hasBranches: false,
      numberOfDoctors: null,
      accountNotes: [],
      numberOfBranches: 0,
      expand: false,
      branches: [],
      _id: &quot;622e2ff2a2c75bcb9aaf641e&quot;,
    },
  
  ];
  
  export default accountData;
  </code></pre>
  <p>Then in the table if the account hasBranches is true I want to show expanding button to show the branches only onClick</p>
  <p>and here is table code</p>
  <pre><code>import {
    useTable,
    useGlobalFilter,
    useFilters,
    usePagination,
    useSortBy,
    useRowSelect,
    useExpanded,
  } from &quot;react-table&quot;;
  import ColumnFilter from &quot;./ColumnFilter&quot;;
  import accountData from &quot;./Data&quot;;
  import { Columns } from &quot;./Columns&quot;;
  import { useMemo } from &quot;react&quot;;
  import &quot;./table.css&quot;;
  import GlobalFilter from &quot;./GlobalFilter&quot;;
  import { CheckBox } from &quot;./CheckBos&quot;;
  
  const PaginationTable = (props) =&gt; {
    const columns = useMemo(() =&gt; Columns, []);
    const data = useMemo(() =&gt; accountData, []);
    const defaultColumns = useMemo(() =&gt; {
      return {
        Filter: ColumnFilter,
      };
    }, []);
  
    const onClickRow = (e) =&gt; {
      const row = e.target;
      console.log(row);
    };
  
    const tableInstance = useTable(
      {
        columns,
        data,
        defaultColumns,
        expanded: {},
      },
      useFilters,
      useGlobalFilter,
      useSortBy,
      useExpanded,
      usePagination,
      useRowSelect,
      (hooks) =&gt; {
        hooks.visibleColumns.push((columns) =&gt; [
          // Let's make a column for selection
          {
            id: &quot;selection&quot;,
            Header: ({ getToggleAllPageRowsSelectedProps }) =&gt; (
              &lt;div&gt;
                &lt;CheckBox {...getToggleAllPageRowsSelectedProps()} /&gt;
              &lt;/div&gt;
            ),
            Cell: ({ row }) =&gt; (
              &lt;div&gt;
                &lt;CheckBox {...row.getToggleRowSelectedProps()} /&gt;
              &lt;/div&gt;
            ),
          },
          {
            // Build our expander column
            id: &quot;expander&quot;, // Make sure it has an ID
            Header: ({ getToggleAllRowsExpandedProps, isAllRowsExpanded }) =&gt; (
              &lt;span {...getToggleAllRowsExpandedProps()}&gt;
                {isAllRowsExpanded ? &quot;&quot; : &quot;&quot;}
              &lt;/span&gt;
            ),
            Cell: ({ row, index }) =&gt;
              // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
              // to build the toggle for expanding a row
              row.canExpand
                ? (row.canExpand,
                  (
                    &lt;span
                      onClick={() =&gt; {
                        console.log(row);
                      }}
                      {...row.getToggleRowExpandedProps({
                        style: {
                          // We can even use the row.depth property
                          // and paddingLeft to indicate the depth
                          // of the row
                          paddingLeft: `${row.depth * 2}rem`,
                        },
                      })}
                    &gt;
                      {row.isExpanded ? &quot;&quot; : &quot;&quot;}
                    &lt;/span&gt;
                  ))
                : null,
          },
          ...columns,
        ]);
      }
    );
  
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      page,
      rows,
      getRowId,
      rowsById,
      getSubRows,
  
      nextPage,
      previousPage,
      canNextPage,
      canPreviousPage,
      pageOptions,
      prepareRow,
      gotoPage,
      pageCount,
      setPageSize,
      canExpand,
      selectedFlatRows,
      allColumns,
      getToggleHideAllColumnsProps,
      state,
      setGlobalFilter,
    } = tableInstance;
  
    const { globalFilter, pageIndex, pageSize, expanded } = state;
  
    const expandedRows = useMemo(() =&gt; {
      if (accountData?.hasBranches) {
        let arr = [{ 0: false }];
        let d = accountData.hasBranches;
        if (d.getGroupedSamplingStationBySystemId.length &gt; 0) {
          arr = d.getGroupedSamplingStationBySystemId.map((sid, ind) =&gt; {
            return { [ind]: true };
          });
        }
        return arr;
      }
    }, []);
  
    // console.log(canExpand);
    return (
      &lt;&gt;
        &lt;div className=&quot;hiding&quot;&gt;
          &lt;div className=&quot;toggleVisibility&quot;&gt;
            &lt;CheckBox {...getToggleHideAllColumnsProps()} /&gt; Toggle All
          &lt;/div&gt;
          {allColumns.map((column) =&gt; (
            &lt;div key={column.id}&gt;
              &lt;label&gt;
                &lt;input type=&quot;checkbox&quot; {...column.getToggleHiddenProps()} /&gt;
                {column.Header}
              &lt;/label&gt;
            &lt;/div&gt;
          ))}
        &lt;/div&gt;
        &lt;GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /&gt;
        &lt;table {...getTableProps()} className=&quot;table&quot;&gt;
          &lt;thead&gt;
            {headerGroups.map((headerGroup) =&gt; (
              &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
                {headerGroup.headers.map((column) =&gt; (
                  &lt;th {...column.getHeaderProps(column.getSortByToggleProps())}&gt;
                    {column.render(&quot;Header&quot;)}
                    &lt;div&gt;{column.canFilter ? column.render(&quot;Filter&quot;) : null}&lt;/div&gt;
                    &lt;span&gt;
                      {column.isSorted
                        ? column.isSortedDesc
                          ? &quot; &quot;
                          : &quot; &quot;
                        : &quot;&quot;}
                    &lt;/span&gt;
                  &lt;/th&gt;
                ))}
              &lt;/tr&gt;
            ))}
            &lt;tr&gt;&lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody {...getTableBodyProps()}&gt;
            {rows.map((row, i) =&gt; {
              prepareRow(row);
              return (
                &lt;tr {...row.getRowProps()}&gt;
                  {row.cells.map((cell) =&gt; {
                    return (
                      &lt;td {...cell.getCellProps()}&gt;{cell.render(&quot;Cell&quot;)}&lt;/td&gt;
                    );
                  })}
                &lt;/tr&gt;
              );
            })}
          &lt;/tbody&gt;
        &lt;/table&gt;
        &lt;pre&gt;
          &lt;code&gt;
            {JSON.stringify(
              { selectedFlatRows: selectedFlatRows.map((row) =&gt; row.original) },
              null,
              2
            )}
            ,
          &lt;/code&gt;
        &lt;/pre&gt;
        &lt;pre&gt;
          &lt;code&gt;{JSON.stringify({ expanded: expanded }, null, 2)}&lt;/code&gt;
        &lt;/pre&gt;
        &lt;div className=&quot;pagination&quot;&gt;
          &lt;span className=&quot;pages&quot;&gt;
            Page{&quot; &quot;}
            &lt;strong&gt;
              {pageIndex + 1} of {pageOptions.length}
            &lt;/strong&gt;{&quot; &quot;}
          &lt;/span&gt;
          &lt;span className=&quot;pages&quot;&gt;
            | Go to Page{&quot; &quot;}
            &lt;input
              type=&quot;number&quot;
              defaultValue={pageIndex + 1}
              onChange={(e) =&gt; {
                const pageNumber = e.target.value
                  ? Number(e.target.value) - 1
                  : 0;
                gotoPage(pageNumber);
              }}
              className=&quot;pageNumber&quot;
              style={{ width: &quot;50px&quot; }}
            /&gt;
          &lt;/span&gt;
          &lt;select
            value={pageSize}
            onChange={(e) =&gt; setPageSize(Number(e.target.value))}
            className=&quot;paginationDropDown&quot;
          &gt;
            {[5, 10, 25, 50].map((pageSize) =&gt; {
              return (
                &lt;option key={pageSize} value={pageSize}&gt;
                  Show {pageSize} per page
                &lt;/option&gt;
              );
            })}
          &lt;/select&gt;
          &lt;button
            onClick={() =&gt; gotoPage(0)}
            disabled={!canPreviousPage}
            className=&quot;paginationButton&quot;
          &gt;
            {&quot;&lt;&lt;&quot;}
          &lt;/button&gt;
          &lt;button
            onClick={() =&gt; previousPage()}
            disabled={!canPreviousPage}
            className=&quot;paginationButton&quot;
          &gt;
            Previous
          &lt;/button&gt;
          &lt;button
            onClick={() =&gt; nextPage()}
            disabled={!canNextPage}
            className=&quot;paginationButton&quot;
          &gt;
            Next
          &lt;/button&gt;
          &lt;button
            onClick={() =&gt; gotoPage(pageCount - 1)}
            disabled={!canNextPage}
            className=&quot;paginationButton&quot;
          &gt;
            {&quot;&gt;&gt;&quot;}
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default PaginationTable;
  </code></pre>
  <p>and here is the screen I am getting
  <a href="https://i.stack.imgur.com/ROCUh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ROCUh.png" alt="enter image description here" /></a></p>
  <p>and here is row log</p>
  <pre><code>&gt; allCells: (9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] canExpand:
  &gt; false cells: (9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] depth:
  &gt; 0 getRowProps: ƒ (userProps) getToggleRowExpandedProps: ƒ (userProps)
  &gt; getToggleRowSelectedProps: ƒ (userProps) id: &quot;12&quot; index: 12
  &gt; isExpanded: undefined isSelected: false isSomeSelected: false
  &gt; original: {company: '621bb1bda49c57b938fb9b8c', country:
  &gt; '6228dac2ad9aef4e064906c3', accountName: 'Prime Medical Center',
  &gt; accountType: 'Group', city: 'Dubai', …} originalSubRows: [] subRows:
  &gt; [] toggleRowExpanded: ƒ (set) toggleRowSelected: ƒ (set) values:
  &gt; {accountName: 'Prime Medical Center', accountType: 'Group', city:
  &gt; 'Dubai', area: 'Qusais', street: 'Industrial ', …} [[Prototype]]:
  &gt; Object
  </code></pre>
  <p>OK, then I am sure it gonna be something very simple to be added
  what I need to know is</p>
  <ol>
  <li>How to detect expanded rows</li>
  <li>Where to put the subrows code in the table</li>
  <li>How to show them conditionally</li>
  </ol>
  <p>I will be grateful if I can get any help soon</p>
  <p>Thanks in advance</p>