Expanding same row.

I have a table in React Table defined like so:

const table = useReactTable({
    data: [
      {
        created_at: "2024-10-13T08:12:10.881855+00:00",
        organization_id: "org_id",
        id: "id",
        data: {
          type: "log_type",
          company_id: "company_id",
          profile_id: "profile_id",
          /*
           other keys for details of log
          */
        },
      },
    ],
    columns: columns,
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    getSortedRowModel: getSortedRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    rowCount: 1,
    getRowCanExpand: () => true,
  });

const table = useReactTable({
    data: [
      {
        created_at: "2024-10-13T08:12:10.881855+00:00",
        organization_id: "org_id",
        id: "id",
        data: {
          type: "log_type",
          company_id: "company_id",
          profile_id: "profile_id",
          /*
           other keys for details of log
          */
        },
      },
    ],
    columns: columns,
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    getSortedRowModel: getSortedRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    rowCount: 1,
    getRowCanExpand: () => true,
  });

const table = useReactTable({
    data: [
      {
        created_at: "2024-10-13T08:12:10.881855+00:00",
        organization_id: "org_id",
        id: "id",
        data: {
          type: "log_type",
          company_id: "company_id",
          profile_id: "profile_id",
          /*
           other keys for details of log
          */
        },
      },
    ],
    columns: columns,
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    getSortedRowModel: getSortedRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    rowCount: 1,
    getRowCanExpand: () => true,
  });

const table = useReactTable({
    data: [
      {
        created_at: "2024-10-13T08:12:10.881855+00:00",
        organization_id: "org_id",
        id: "id",
        data: {
          type: "log_type",
          company_id: "company_id",
          profile_id: "profile_id",
          /*
           other keys for details of log
          */
        },
      },
    ],
    columns: columns,
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    getSortedRowModel: getSortedRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    rowCount: 1,
    getRowCanExpand: () => true,
  });

And with columns defined like so:

export const columns: ColumnDef<IAuditLog>[] = [
  {
    accessorKey: "created_at",
    header: "Time",
    cell: ({ row }) => {
      const timezoneTime = fromUTC(new Date(row.original.created_at));
      return (
        <>
          {timezoneTime.date} {timezoneTime.time}
        </>
      );
    },
  },
  {
    accessorKey: "type",
    header: "Log Type",
    cell: ({ row }) => {
      return <>{row.original.data.type}</>;
    },
  },
  {
    accessorKey: "children",
    header: () => <>Expand</>,
    cell: ({ row }) => {
      return (
        <>
          {row.getCanExpand() ? (
            <Button onClick={() => row.getToggleExpandedHandler()}>
              {row.getIsExpanded() ? <ChevronUpIcon /> : <ChevronDownIcon />}
            </Button>
          ) : null}
        </>
      );
    },
  },
];

export const columns: ColumnDef<IAuditLog>[] = [
  {
    accessorKey: "created_at",
    header: "Time",
    cell: ({ row }) => {
      const timezoneTime = fromUTC(new Date(row.original.created_at));
      return (
        <>
          {timezoneTime.date} {timezoneTime.time}
        </>
      );
    },
  },
  {
    accessorKey: "type",
    header: "Log Type",
    cell: ({ row }) => {
      return <>{row.original.data.type}</>;
    },
  },
  {
    accessorKey: "children",
    header: () => <>Expand</>,
    cell: ({ row }) => {
      return (
        <>
          {row.getCanExpand() ? (
            <Button onClick={() => row.getToggleExpandedHandler()}>
              {row.getIsExpanded() ? <ChevronUpIcon /> : <ChevronDownIcon />}
            </Button>
          ) : null}
        </>
      );
    },
  },
];

export const columns: ColumnDef<IAuditLog>[] = [
  {
    accessorKey: "created_at",
    header: "Time",
    cell: ({ row }) => {
      const timezoneTime = fromUTC(new Date(row.original.created_at));
      return (
        <>
          {timezoneTime.date} {timezoneTime.time}
        </>
      );
    },
  },
  {
    accessorKey: "type",
    header: "Log Type",
    cell: ({ row }) => {
      return <>{row.original.data.type}</>;
    },
  },
  {
    accessorKey: "children",
    header: () => <>Expand</>,
    cell: ({ row }) => {
      return (
        <>
          {row.getCanExpand() ? (
            <Button onClick={() => row.getToggleExpandedHandler()}>
              {row.getIsExpanded() ? <ChevronUpIcon /> : <ChevronDownIcon />}
            </Button>
          ) : null}
        </>
      );
    },
  },
];

export const columns: ColumnDef<IAuditLog>[] = [
  {
    accessorKey: "created_at",
    header: "Time",
    cell: ({ row }) => {
      const timezoneTime = fromUTC(new Date(row.original.created_at));
      return (
        <>
          {timezoneTime.date} {timezoneTime.time}
        </>
      );
    },
  },
  {
    accessorKey: "type",
    header: "Log Type",
    cell: ({ row }) => {
      return <>{row.original.data.type}</>;
    },
  },
  {
    accessorKey: "children",
    header: () => <>Expand</>,
    cell: ({ row }) => {
      return (
        <>
          {row.getCanExpand() ? (
            <Button onClick={() => row.getToggleExpandedHandler()}>
              {row.getIsExpanded() ? <ChevronUpIcon /> : <ChevronDownIcon />}
            </Button>
          ) : null}
        </>
      );
    },
  },
];

I want to be able to expand the row, so that I can show all the details from the "data" object.
As you can see, I am already using some of the data from the "data" object, for the "real" row.
When I setup the code like above, I am not able to expand the rows, even if I force

getRowCanExpand: () => true

getRowCanExpand: () => true

getRowCanExpand: () => true

getRowCanExpand: () => true

. (Nothing happens when button is pressed)
Am I missing something, or am I just not able to expand if I don't have an actual sub-row object?

Expanding same row.

Similar Threads

Similar Threads

Similar Threads