Function ArraySubTable

src/components/fields/ArraySubTable/SideDrawerField.tsx:15–56

({
  column,
  _rowy_ref,
}: ISideDrawerFieldProps)

import { useSubTableData } from "./utils";

export default function ArraySubTable({
  column,
  _rowy_ref,
}: ISideDrawerFieldProps) {
  const [row] = useAtom(
    useMemo(
      () =>
        selectAtom(
          tableRowsAtom,
          (tableRows) => find(tableRows, ["_rowy_ref.path", _rowy_ref.path]),
          isEqual
        ),
      [_rowy_ref.path]
    ),
    tableScope
  );

  const { documentCount, label, subTablePath } = useSubTableData(
    column as any,
    row as any,
    _rowy_ref
  );

  return (
    <Stack direction="row" id={getFieldId(column.key)}>
      <Box sx={fieldSx}>
        {documentCount} {column.name as string}: {label}
      </Box>

      <IconButton
        component={Link}
        to={subTablePath}
        edge="end"
        size="small"
        sx={{ ml: 1 }}
        disabled={!subTablePath}
      >
        <OpenIcon />
      </IconButton>
    </Stack>
  );
}