react-table-expand.js

// column
const columns = React.useMemo(
    () => [
      {
        id: 'expander',
        accessor: '',
        Header: ({ getToggleAllRowsExpandedProps, isAllRowsExpanded }) => (
          <span {...getToggleAllRowsExpandedProps()}>
            {isAllRowsExpanded ? '👇' : '👉'}
          </span>
        ),
        Cell: ({ row }) => {
          return (
            // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
            // to build the toggle for expanding a row
            row.canExpand ? (
              <span
                {...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`
                  }
                })}
              >
                {row.isExpanded ? '👇' : '👉'}
              </span>
            ) : null
          )
        }
      },
      {
        Header: 'UID',
        accessor: 'id',
        disableFilters: true,
        Cell: function UID(props) {
          return props.value.split('-')[0]
        }
      },
      {
        Header: 'Country',
        accessor: 'country'
      },
      {
        Header: 'Education',
        accessor: 'education'
      },
      {
        Header: 'Experience',
        accessor: 'years_of_exp'
      },
      {
        Header: 'Skills',
        accessor: 'skills',
        Filter: TagFilter,
        Cell: function Skill(props) {
          return <Skills skills={props.value} />
        }
      }
    ],
    []
  )
  
  
  // usetable hook
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state,
    state: { expanded },
    visibleColumns,
    preGlobalFilteredRows,
    setGlobalFilter
  } = useTable(
    {
      columns,
      data,
      defaultColumn,
      filterTypes,
      useState
    },
    useGlobalFilter, // useGlobalFilter!
    useFilters,
    useExpanded
  )
  
  

👍 Aight I'll hit you up tomorrow on twitter!