Add option for vertical tables.

[bwood1]

Instead of having the column headers at the top of the table and the data going down, would like to have the headers in the left column and the data in the cell next to the header.

         My Table
| **Header 1:** | data 1 |
| **Header 2:** | data 2 |
| **Header 3:** | data 3 |

[tannerlinsley]

Interesting use case! I'm not sure that react-table is capable of handling this without a significant rewrite of the view logic. But, there's good news to that statement! If you felt inclined, you could implement your very own view logic (using as much or as little of react table as you want). The Functional Rendering section of the docs shows the tip of the iceberg on how this could be accomplished.

If you end up trying this out, I would love to hear about your experience! In the meantime however, react-table won't be able to support this feature out of the box :/

[abhiox]

So, did you end up trying this out, @bwood1 ?

[bwood1]

I was able to get it to look the way I wanted using the following JSON

"data": [{
"title": "title1",
"value": "value1"
},{
"title": "title2",
"value": "value2"
},{
"title": "title3",
"value": "value3"
},{
"title": "title4",
"value": "value4"
}],
"columns": [{
"columns": [{
"header": "Title",
"accessor": "title"
}, {
"header": "Value",
"accessor": "value"
}]
}]

It produces a table that looks like this

[norvalbv]

Unfortunately this doesn't seem to work with V8. Is there an update for this? @bwood1

[khushijain21]

does react-table support this feature now?

[khushijain21]

Hello, @tannerlinsley I'd like to try implementing this feature, could you direct?

[s4hubhamp]

I've used below workaround for now..

import * as React from "react";
import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";
import "./styles.css";

const defaultData = [
  {
    firstName: "tanner",
    lastName: "linsley",
    age: 24,
    visits: 100,
    status: "In Relationship",
    progress: 50,
  },
  {
    firstName: "tandy",
    lastName: "miller",
    age: 40,
    visits: 40,
    status: "Single",
    progress: 80,
  },
  {
    firstName: "joe",
    lastName: "dirte",
    age: 45,
    visits: 20,
    status: "Complicated",
    progress: 10,
  },
];

const columnHelper = createColumnHelper();

const columns = [
  columnHelper.accessor("firstName", {
    cell: (info) => info.getValue(),
    footer: (info) => info.column.id,
  }),
  columnHelper.accessor((row) => row.lastName, {
    id: "lastName",
    cell: (info) => <i>{info.getValue()}</i>,
    header: () => <span>Last Name</span>,
    footer: (info) => info.column.id,
  }),
  columnHelper.accessor("age", {
    header: () => "Age",
    cell: (info) => info.renderValue(),
    footer: (info) => info.column.id,
  }),
  columnHelper.accessor("visits", {
    header: () => <span>Visits</span>,
    footer: (info) => info.column.id,
  }),
  columnHelper.accessor("status", {
    header: "Status",
    footer: (info) => info.column.id,
  }),
  columnHelper.accessor("progress", {
    header: "Profile Progress",
    footer: (info) => info.column.id,
  }),
];

export default function App() {
  const [data, _setData] = React.useState(() => [...defaultData]);
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  function renderRemainingRowData(header, table) {
    return (
      <>
        {table.getRowModel().rows.map((row) => {
          const val = header.column.columnDef.accessorKey
            ? row.original[header.column.columnDef.accessorKey]
            : header.column.accessorFn(row.original);
          return <td>{val}</td>;
        })}
      </>
    );
  }

  return (
    <div className="App">  
      <table>
        {table.getHeaderGroups().map((headerGroup) =>
          headerGroup.headers.map((header) => (
            <tr key={header.id}>
              <th>
                {header.isPlaceholder
                  ? null
                  : flexRender(
                      header.column.columnDef.header,
                      header.getContext()
                    )}
              </th>
              {renderRemainingRowData(header, table)}
            </tr>
          ))
        )}
      </table>
    </div>
  );
}