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
  )
  
  

A couple things jump out:

1. accessor in the first element in your data is blank… wondering if that's throwing things off like short circuiting the expand logic assuming there is now data for that row.
2. Try moving useExpanded to right after the table config in useTable call. I think I remember argument position was important (unexpectedly). This was probably me missing something during a debugging session, but I remember moving those around got my table working as expected.

Here's a sample of my setup:

function ExpandCell({ row }) {
  return row.canExpand ? (
    <span {...row.getToggleRowExpandedProps()}>
      <ChevronToggleIcon
        css={{
          size: "24px",
          transition: "transform 100ms ease-in-out",
          transform: row.isExpanded ? "rotate(90deg)" : "rotate(0)",
        }}
      />
    </span>
  ) : null;
}

// ...

const columns = useMemo(() => [
  {
    id: "expander",
    Cell: ExpandCell,
  },
], []);

// ...

const tableData = useMemo(() => items, [items]);

let tableConfig;

if (pageInfo) {
  tableConfig = {
    columns,
    data: tableData,
    initialState: {
      pageSize: pageInfo.first,
      pageIndex: pageInfo.currentPage,
    },
    pageCount: pageInfo.totalPages,
    manualPagination: true,
    getSubRows: (row) =>
      row.variants?.map((variant) => ({
        ...variant,
        itemId: row.id,
      })),
    expandSubRows: true,
  };
} else {
  tableConfig = {
    columns,
    data: tableData,
  };
}
const table = useTable(tableConfig, useExpanded, pageInfo && usePagination);

Thanks @derekr, I get an error that says global filter plugin is supposed to go before expanding.

I've added a value for accessor and it doesn't seem to change anything T_T

I have no idea what could possibly be wrong. I've been trying to get row.canExpand as true for days

Have you tried not setting accessor at all? If you don't get it working by tomorrow I can hop on a zoom or something to pair if you're down.

I'd be down to pair! I'll let you know tomorrow.

I have tried with no accessor, too. No good :(

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