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

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

nl3v
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 🙌

8 replies

RichMie May 8, 2023

Thanks!

manoharanamphora Sep 19, 2023

how to do the same in v8

df-peejay Oct 22, 2023

Any road map to support the same rowspan in v8?

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?

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 :)

2 replies

nl3v 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.

nl3v 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.

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 ?

2 replies

deadcoder0904 Sep 1, 2023
Author

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

tushar1998 Sep 1, 2023

Actually I solved this issue by taking reference of parent columns length and checking for undefined values in table. Not a straightforward thing but achievedable

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use rowSpan? #2233

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 9 comments 19 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

How to use rowSpan? #2233

Replies: 9 comments · 19 replies

deadcoder0904 Apr 30, 2020 Author

deadcoder0904 May 10, 2020 Author

deadcoder0904 May 11, 2020 Author

deadcoder0904 Sep 1, 2023 Author

Replies: 9 comments 19 replies

deadcoder0904
Apr 30, 2020
Author

deadcoder0904
May 10, 2020
Author

deadcoder0904
May 11, 2020
Author

deadcoder0904 Sep 1, 2023
Author