How to use rowSpan? #2233

deadcoder0904 · 2020-04-26T13:48:53Z

deadcoder0904
Apr 26, 2020

I made a minimal repro of my original code. Here it is in HTML:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { 
  text-align: center;
  border: 1px dashed lightpink;
  color: navy;
}

</style>
</head>
<body>

<table>
  <tr>
    <th>Actor</th>
    <th>Movies</th>
  </tr>
  <tr>
    <td rowspan="4">Johnny Depp</td>
    <td>Pirates of the Carribean  1</td>
  </tr>
  <tr>
    <td>Pirates of the Carribean  2</td>
  </tr>
  <tr>
    <td>Pirates of the Carribean  3</td>
  </tr>
  <tr>
    <td>Pirates of the Carribean  4</td>
  </tr>
</table>

</body>
</html>

The output looks like:

So I tried implementing it in CodeSandBox. Following is the code:

import * as React from "react";
import { useTable } from "react-table";

const borderStyle = {
  border: "1px dashed navy"
};

export default function App() {
  const data = React.useMemo(
    () => [
      {
        actor: "Johnny Depp",
        movies: [
          {
            name: "Pirates of the Carribean 1"
          },
          {
            name: "Pirates of the Carribean 2"
          },
          {
            name: "Pirates of the Carribean 3"
          },
          {
            name: "Pirates of the Carribean 4"
          }
        ]
      }
    ],
    []
  );
  const columns = React.useMemo(
    () => [
      {
        Header: "Actor",
        accessor: "actor",
        enableRowSpan: true
      },
      {
        Header: "Movies",
        accessor: (row, index) => {
          console.log({ row });
          return row.movies.map(movie => movie.name);
        }
      }
    ],
    []
  );
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({ columns, data });
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()} style={borderStyle}>
                {column.render("Header")}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          if (i == 0) {
            console.log({ row });
          }
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell, j) => {
                if (i == 0 && j < 2) {
                  console.log({ cell, i, j });
                }
                return (
                  <td
                    rowSpan={cell.rowSpan}
                    {...cell.getCellProps()}
                    style={borderStyle}
                  >
                    {cell.render("Cell")}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

Here's the direct link to it: https://codesandbox.io/s/modest-sanderson-z0keq?file=/src/App.tsx

It looks like:

I want movie names to be one below the other but can't seem to figure it out 🤔

I want it to look like the HTML. The data shouldn't change as my original use-case fetches from an API. How do I do it?

Answered by deadcoder0904

May 10, 2020

Okay made it work. Guess I just had to flatten the data. It was as easy as just copying & pasting your code. Here's the working solution:

import * as React from "react";
import { useTable } from "react-table";

type Data = {
  actor: string;
  movie: string;
};

const borderStyle = {
  border: "1px solid gray",
  padding: "8px 10px"
};

function useInstance(instance) {
  const { allColumns } = instance;

  let rowSpanHeaders = [];

  allColumns.forEach((column, i) => {
    const { id, enableRowSpan } = column;

    if (enableRowSpan !== undefined) {
      rowSpanHeaders = [
        ...rowSpanHeaders,
        { id, topCellValue: null, topCellIndex: 0 }
      ];
    }
  });

  Object.assign(i…

View full answer

nlevnaut · 2020-04-26T16:18:54Z

nlevnaut
Apr 26, 2020

There is no rowspan hook included in react-table currently. So while you are setting rowSpanEnabled on the header and referencing cell.rowSpan, you aren't ever setting cell.rowSpan or checking rowSpanEnabled again.

0 replies

deadcoder0904 · 2020-04-30T10:13:11Z

deadcoder0904
Apr 30, 2020
Author

@liberza I got that. I left that part out purposely because Idk how to display the movie names row by row.

My movie list is an array of objects so how will I display it beside actor name? So it looks like:

Actor	Movies
Johnny Depp	Pirates of the Carribean 1
Johnny Depp	Pirates of the Carribean 2
Johnny Depp	Pirates of the Carribean 3
Johnny Depp	Pirates of the Carribean 4

Once I fix that, I can totally see myself copying your Codesandbox ;)

0 replies

deadcoder0904 · 2020-05-10T07:52:13Z

deadcoder0904
May 10, 2020
Author

Okay made it work. Guess I just had to flatten the data. It was as easy as just copying & pasting your code. Here's the working solution:

import * as React from "react";
import { useTable } from "react-table";

type Data = {
  actor: string;
  movie: string;
};

const borderStyle = {
  border: "1px solid gray",
  padding: "8px 10px"
};

function useInstance(instance) {
  const { allColumns } = instance;

  let rowSpanHeaders = [];

  allColumns.forEach((column, i) => {
    const { id, enableRowSpan } = column;

    if (enableRowSpan !== undefined) {
      rowSpanHeaders = [
        ...rowSpanHeaders,
        { id, topCellValue: null, topCellIndex: 0 }
      ];
    }
  });

  Object.assign(instance, { rowSpanHeaders });
}

export default function App() {
  const origData = [
    {
      actor: "Johnny Depp",
      movies: [
        {
          name: "Pirates of the Carribean 1"
        },
        {
          name: "Pirates of the Carribean 2"
        },
        {
          name: "Pirates of the Carribean 3"
        },
        {
          name: "Pirates of the Carribean 4"
        }
      ]
    }
  ];
  const newData: Array<Data> = [];
  origData.forEach(actorObj => {
    actorObj.movies.forEach(movie => {
      newData.push({
        actor: actorObj.actor,
        movie: movie.name
      });
    });
  });
  const data = React.useMemo(() => newData, []);
  const columns = React.useMemo(
    () => [
      {
        Header: "Actor",
        accessor: "actor",
        enableRowSpan: true
      },
      {
        Header: "Movies",
        accessor: "movie"
      }
    ],
    []
  );
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    rowSpanHeaders
  } = useTable({ columns, data }, hooks => {
    hooks.useInstance.push(useInstance);
  });
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()} style={borderStyle}>
                {column.render("Header")}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);

          for (let j = 0; j < row.allCells.length; j++) {
            let cell = row.allCells[j];
            let rowSpanHeader = rowSpanHeaders.find(
              x => x.id === cell.column.id
            );

            if (rowSpanHeader !== undefined) {
              if (
                rowSpanHeader.topCellValue === null ||
                rowSpanHeader.topCellValue !== cell.value
              ) {
                cell.isRowSpanned = false;
                rowSpanHeader.topCellValue = cell.value;
                rowSpanHeader.topCellIndex = i;
                cell.rowSpan = 1;
              } else {
                rows[rowSpanHeader.topCellIndex].allCells[j].rowSpan++;
                cell.isRowSpanned = true;
              }
            }
          }
          return null;
        })}
        {rows.map(row => {
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                if (cell.isRowSpanned) return null;
                else
                  return (
                    <td
                      style={borderStyle}
                      rowSpan={cell.rowSpan}
                      {...cell.getCellProps()}
                    >
                      {cell.render("Cell")}
                    </td>
                  );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

And here's the link to Codesandbox 👉 https://codesandbox.io/s/flattening-row-with-react-table-prkqb?file=/src/App.tsx

Thank you @liberza 🙌

11 replies

MDziurakh Oct 26, 2023

@tannerlinsley, hi! We really need some documentation about rowSpan! Please, help!

DatTN95 May 15, 2024

can you show me a example in v8?

syldouss Jun 14, 2024

@DatTN95
Based previous propositions from @deadcoder0904 and @Zinoberous, here is an implementation in V8

Here is the Table component

// Table.tsx
import {
  ColumnDef,
  Row,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";

const renderRows = (rows: Row<any>[]) => {
  console.log("rows start", rows);
  rows.map((row: any, i: number, rows) => {
    const topRow: any = rows[i - 1];

    for (let j = 0; j < row.getVisibleCells().length; j++) {
      let cell = row.getVisibleCells()[j];

      if (
        !cell.column.columnDef.meta?.enableRowSpan ||
        !topRow ||
        topRow?.getIsGrouped() ||
        row?.getIsGrouped()
      ) {
        cell.rowSpan = 1;
        cell.isRowSpanned = false;
        continue;
      }

      const getMergeTopCell = (ri: number, ci: number): any => {
        const cell: any = (rows[ri] as any).getVisibleCells()[ci];

        const topRow: any = rows[ri - 1];
        const topCell: any = topRow?.getVisibleCells()[ci];

        if (
          !topRow ||
          topRow.getIsGrouped() ||
          JSON.stringify(topCell.getValue()) !== JSON.stringify(cell.getValue())
        ) {
          return cell;
        } else {
          return getMergeTopCell(ri - 1, ci);
        }
      };

      let topCell = topRow.getVisibleCells()[j];

      if (
        JSON.stringify(topCell.getValue()) === JSON.stringify(cell.getValue())
      ) {
        getMergeTopCell(i, j).rowSpan += 1;
        cell.isRowSpanned = true;
      } else {
        cell.rowSpan = 1;
        cell.isRowSpanned = false;
      }
    }

    return null;
  });

  console.log("rows prepared", rows);

  return rows.map((row: any) => {
    return (
      <tr key={row.id}>
        {row.getVisibleCells().map((cell: any) => {
          if (cell.isRowSpanned) return null;
          else
            return (
              <td
                key={cell.id}
                rowSpan={cell.rowSpan}
                style={{ border: "1px solid black", padding: "4px" }}
              >
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            );
        })}
      </tr>
    );
  });
};

type TableProps = {
  columns: ColumnDef<any, any>[];
  data: object[];
};

export default function Table({ columns, data }: TableProps) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table
      style={{
        borderCollapse: "collapse",
      }}
    >
      <thead className="">
        {table.getHeaderGroups().map((headerGroup: any) => (
          <tr key={headerGroup.id} style={{}}>
            {headerGroup.headers.map((header: any) => (
              <th
                key={header.id}
                scope="col"
                style={{ border: "1px solid black", padding: "4px" }}
              >
                {header.isPlaceholder
                  ? null
                  : flexRender(
                      header.column.columnDef.header,
                      header.getContext()
                    )}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody className="">{renderRows(table.getRowModel().rows)}</tbody>
    </table>
  );
}

And here is how to call it with props:

// App.tsx
import "./styles.css";
import Table from "./Table";
import { createColumnHelper } from "@tanstack/react-table";

export type Player = {
  team: string;
  firstName: string;
  lastName: string;
};

const data = [
  {
    team: "LA Lakers",
    firstName: "Lebron",
    lastName: "James",
  },
  { team: "LA Lakers", firstName: "Anthony", lastName: "Davis" },
  { team: "Boston Celtics", firstName: "Jayson", lastName: "Tatum" },
  { team: "Boston Celtics", firstName: "Jaylen", lastName: "Brown" },
  { team: "NY Knicks", firstName: "Jalen", lastName: "Brunson" },
];

const columnHelper = createColumnHelper<Player>();
const columns = [
  columnHelper.accessor("team", {
    header: () => "Team",
    meta: { enableRowSpan: true },
  }),
  columnHelper.accessor("firstName", {
    header: () => "Firstname",
  }),
  columnHelper.accessor("lastName", {
    header: () => "Lastname",
  }),
];

export default function App() {
  return (
    <div className="App">
      <h1>Here are the ball teams players</h1>
      <Table columns={columns} data={data} />
    </div>
  );
}

You can find sandbox here : https://codesandbox.io/p/sandbox/tanstack-react-table-with-rowspan-chmh76

DatTN95 Aug 26, 2024

tks bro

michaelsawyers Oct 15, 2024

This only works when the data rows that are intended to be grouped together are adjacent. So either the original data has the rows that should span together as siblings, or the table is sorted 'asc' or 'desc' on the column to group cells.

Nonetheless, thanks for sharing your V8 solution!

deadcoder0904 · 2020-05-11T06:09:49Z

deadcoder0904
May 11, 2020
Author

@liberza I found 1 problem with your solution. Guess it might be an edge-case. But here's the problem.

I have 2 columns that I have to rowSpan. The 1st column & the 2nd one. The 1st column is unique in names but the 2nd one isn't.

As the 2nd one is a ratings column & ratings are sometimes same while the 1st one remains unique.

Here's a visual:

Name	Ratings	Animals	Places
A	5
A	5
B	4.9
B	4.9
C	4.9
C	4.9

So the Name column spans perfectly with 2 rows spanning each.

The problem comes while spanning Ratings. The 1st two rows span 2. But the 2nd two rows span 4 as 4.9 is same for 4 rows as they are besides. I'm trying to keep track of the 1st unique column ,i.e, Name & span the Ratings column accordingly. But haven't successfully done it yet.

Let me know if you have any solutions in this regard? Also, keep this use-case in mind while making the plugin, I guess it'll be a common one. Just a hunch :)

3 replies

nlevnaut Jul 14, 2020

@deadcoder0904 I finally got around to creating an updated example with how I am doing it now. See here: https://codesandbox.io/s/vigorous-wescoff-nup6e

In order to get the functionality you are looking for, just uncomment the code that refers to parentBoundary.

nlevnaut Jul 14, 2020

Also now that I've got the implementation in a better state, see #2534 for progress on adding this as a base plugin.

tvone Dec 31, 2024

@liberza I found 1 problem with your solution. Guess it might be an edge-case. But here's the problem.

I have 2 columns that I have to rowSpan. The 1st column & the 2nd one. The 1st column is unique in names but the 2nd one isn't.

As the 2nd one is a ratings column & ratings are sometimes same while the 1st one remains unique.

Here's a visual:

Name Ratings Animals Places
A 5
A 5
B 4.9
B 4.9
C 4.9
C 4.9
So the Name column spans perfectly with 2 rows spanning each.

The problem comes while spanning Ratings. The 1st two rows span 2. But the 2nd two rows span 4 as 4.9 is same for 4 rows as they are besides. I'm trying to keep track of the 1st unique column ,i.e, Name & span the Ratings column accordingly. But haven't successfully done it yet.

Let me know if you have any solutions in this regard? Also, keep this use-case in mind while making the plugin, I guess it'll be a common one. Just a hunch :)

Do you have any solution for v8?

Kuncheria-Kuruvilla · 2020-10-14T06:34:55Z

Kuncheria-Kuruvilla
Oct 14, 2020

Is there any way by which we can have row span on the table header, like the one below

7 replies

ljubomirsinadinovski Aug 24, 2021

I managed to make a hack like this, but i don't know if this is going to have limitations in the future:

Inside of the table structure i modified the returning into:

                  <th
                    {...column.getHeaderProps()}
                    rowSpan={`${column.rowSpan ?? 1}`}
                    style={column.displayNone ? { display: 'none' } : {}}
                  >
                    {column.render('Header')}
                  </th>

While having in the data structure (JSON object containing the Header data) something like this:

{
    Header: 'Header Name That has spanRow=3',
    columns: [
      {
        Header: 'Not visible header 2',
        displayNone: true,
        columns: [{ Header: 'Not visible header 3', accessor: 'theAccessor', displayNone: true }],
      },
    ],
    rowSpan: '3',
},

aliabdollahy Dec 5, 2021

thanks! it worked for me.

noorqidam Aug 15, 2022

I managed to make a hack like this, but i don't know if this is going to have limitations in the feature:

Inside of the table structure i modified the returning into:

                  <th
                    {...column.getHeaderProps()}
                    rowSpan={`${column.rowSpan ?? 1}`}
                    style={column.displayNone ? { display: 'none' } : {}}
                  >
                    {column.render('Header')}
                  </th>

While having in the data structure (JSON object containing the Header data) something like this:

{
    Header: 'Header Name That has spanRow=3',
    columns: [
      {
        Header: 'Not visible header 2',
        displayNone: true,
        columns: [{ Header: 'Not visible header 3', accessor: 'theAccessor', displayNone: true }],
      },
    ],
    rowSpan: '3',
},

can you provide an example in Codesandbox because I'm having trouble using rowspan

ljubomirsinadinovski Aug 25, 2022

did u manage to solve it? Please make the code sandbox and I will write here what should you change. It saves much more time for me. Thanks

azhoang-sts Oct 5, 2022

@tannerlinsley please help me!

dan1994 · 2021-03-24T17:57:44Z

dan1994
Mar 24, 2021

I was wondering if there's a way to use rowSpan along with useResizeableColumns. According to the docs, useResizeableColumns works only when using non-table elements. Is there a way to emulate behavior like rowSpan in that state?

0 replies

bad4iz · 2021-04-28T16:21:59Z

bad4iz
Apr 28, 2021

how to do this header table?

0 replies

tushar1998 · 2023-08-30T18:30:25Z

tushar1998
Aug 30, 2023

@deadcoder0904 Is there a way to achieve this for colspan ?

4 replies

deadcoder0904 Sep 1, 2023
Author

ask chatgpt. haven't used this in a while but chatgpt should be able to answer :)

if (value !== undefined) {
	return (
		<td
		  key={cell.id}
		  colSpan={row.index === 0 ? cell.column.parent?.columns.length : 1}
	        >
		  {children}
		</td>
         );
}

df-peejay · 2023-10-22T01:43:56Z

df-peejay
Oct 22, 2023

What about the support for the same in v8? Is there any roadmap for this?

0 replies

How to use rowSpan? #2233

Replies: 9 comments · 25 replies

deadcoder0904 Apr 30, 2020 Author

deadcoder0904 May 10, 2020 Author

deadcoder0904 May 11, 2020 Author

deadcoder0904 Sep 1, 2023 Author

Replies: 9 comments 25 replies

deadcoder0904
Apr 30, 2020
Author

deadcoder0904
May 10, 2020
Author

deadcoder0904
May 11, 2020
Author

deadcoder0904 Sep 1, 2023
Author