TableVirtuoso - expandable rows

[dimon82]

Hi, I need to make rows in TableVirtuoso expandable, or in other words dynamically add/remove more rows when needed. Imagine a folder structure where you show all folders in a table and you can expand any folder to show files. The challenge here is that itemContent prop expects cells, not row(s), so I can't just pass a component in that renders something like below, where I'd show/hide file rows depending on user action

<tr>
  <td>{folderName}</td>
  <td>{folderDescription}</td>
</tr>
{folder.files.map(file =>
  <tr>
    <td>{file.Name}</td>
    <td>{file.Description}</td>
  </tr>
)}

I'd appreciate any help/suggestions on how to best use TableVirtuoso for my case.

[amitava82]

Any solution for this?

[tryonelove]

I've managed to do that with context and using custom TableRow that renders all the content (instead of itemContents). Here's a sample:

https://codesandbox.io/s/react-virtuoso-expandable-64tl3p?file=/App.js

Note that you should store expanded state somewhere outside the row, since it's getting mounted & unmounted each time viewport reaches the row, so the state is getting lost.

Also, slightly jumping might occur due to additional row render.

[TonyVeigel]

@amitava82 I get the same big UX jump, did you find a solution at all?

[amitava82]

nope.

[OneTuskedMario]

@amitava82 @TonyVeigel I get the same thing, did you figure anything out at the end

[codemonkey800]

The way how I got around this was to add an extra item to the data array right after the expanded row with a special property to indicate it's the expanded row. something like type: 'expanded-row'. by including it as part of the virtualized data, there's no jump in the UX

function TableRow({ context, ...props }) {
  const { rows, renderExpandedRow, isExpandRow } = context
  const index = props['data-index']
  const row = rows[index]

  if (isExpandRow?.(row.original) && renderExpandedRow) {
    return (
      <tr key={`${key}-expand-row`} {...rest}>
        <td colSpan={100}>{renderExpandedRow(row)}</td>
      </tr>
    )
  }

  return <tr {...rest} key={key} />
}

const COMPONENTS = {
  TableRow,
}

export function VirtualizedTableV3({
  rows,
  getExpandItem,
  isExpandRow,
  renderExpandedRow,
  showExpandRow,
}) {
  const data = useMemo(() => {
    if (!showExpandRow || !getExpandItem) {
      return rawData
    }

    const result = []

    for (const item of rawData) {
      result.push(item)

      if (showExpandRow(item)) {
        result.push(getExpandItem(item))
      }
    }

    return result
  }, [getExpandItem, rawData, showExpandRow])

  return (
    <TableVirtuoso
      data={data}
      components={COMPONENTS}
      context={{
        isExpandRow,
        renderExpandedRow,
        rows,
      }}
    />
  )
}

then you can use the props like this:

renderExpandedRow={row => <ExpandedRow row={row} />}
showExpandRow={item => expandedRow === item.name}
isExpandRow={item => item.type === 'expanded-row'}
getExpandItem={item => ({
  ...item,
  type: 'expanded-row' ,
})}

[OneTuskedMario]

@codemonkey800 that's what I ended up doing, basically just injecting the sub Rows under the parent Row that's "expanding" and then removing them when "collapsing". Everything being handled as a flat Array. You can also get the index from the itemContent property and just inject the extra subRows directly under it

[shafa909]

import { Collapse } from "@mui/material";
import { Virtuoso } from "react-virtuoso";

const app = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [data, setData] = useState([]);
  const [currentOpenIndex, setcurrentOpenIndex] = useState("");

  const fetchData = async () => {
    fetch(`https://dummyapi.io/data/v1/user?limit=10&page=${currentPage}`)
      .then(response => response.json())
      .then(result => {
        setData(data => [...data, ...result.data]);
        setCurrentPage(page => page + 1);
      })
      .catch(error => console.log("error", error));
  };

  return( 
     <Virtuoso
        style={{ height: 1000 }}
        data={data}
        endReached={fetchData}
        itemContent={(index, data) => {
          let bgColor = "";
          if (index % 2 === 0) {
            bgColor = "yellow";
          } else {
            bgColor = "blue";
          }

          return (
             <div style={{ background: bgColor, marginTop : 3 }}>
              <div
                style={{ height: 50 }}
                onClick={() =>
                  currentOpenIndex === index ? setcurrentOpenIndex("") : setcurrentOpenIndex(index)
                }
              >
                {data.name}
              </div>
              <Collapse in={index === currentOpenIndex} unmountOnExit>
                <Typography>{data.news}</Typography>
              </Collapse>
            </div>
          )}
        }
     />
   )}
}

recently I worked on a same example , it include expanding of row as well as infinite scroll using MUI-Collapse, and its works for me for some pretty huge data.