Question 197831 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – question related to colspan in material react table

I have created a Material React table using
<MaterialReactTable columns={columns} data={data} />.
I want a colspan across two to three columns (example below).

Is it possible with material react table or do i need to use ag-grid? if using ag-grid, what is syntax?

Example preview

I am expecting the column span should be displayed.

Tags:

2

Answers


  1. 0

    You can achieve as you expected in the picture by using MaterialTable package.

    Here is the customization for <TableCell colSpan={number} /> in the header section:

    <MaterialTable
  columns={columns}
  data={data}
  components={{
    Header: (props) => {
      return (
        <TableHead>
          <TableRow>
            <TableCell
              colSpan={2}
              align="center"
              style={{ border: "1px solid black", padding: "8px" }}
            >
              Name
            </TableCell>
            <TableCell
              colSpan={1}
              align="center"
              style={{ border: "1px solid black", padding: "8px" }}
            >
              {/* Add heading here */}
            </TableCell>
            <TableCell
              colSpan={1}
              align="center"
              style={{ border: "1px solid black", padding: "8px" }}
            >
              {/* Add heading here */}
            </TableCell>
            <TableCell
              colSpan={1}
              align="center"
              style={{ border: "1px solid black", padding: "8px" }}
            >
              {/* Add heading here */}
            </TableCell>
          </TableRow>
          <TableRow>
            <TableCell
              align="center"
              style={{ border: "1px solid black", padding: "8px" }}
            >
              FName
            </TableCell>
            <TableCell
              align="center"
              style={{ border: "1px solid black", padding: "8px" }}
            >
              LName
            </TableCell>
            <TableCell
              align="center"
              style={{ border: "1px solid black", padding: "8px" }}
            >
              Age
            </TableCell>
            <TableCell
              align="center"
              style={{ border: "1px solid black", padding: "8px" }}
            >
              Gender
            </TableCell>
            <TableCell
              align="center"
              style={{ border: "1px solid black", padding: "8px" }}
            >
              Address
            </TableCell>
          </TableRow>
        </TableHead>
      );
    },
    Row: ({ data }) => {
      return (
        <TableRow>
          <TableCell style={{ border: "1px solid black", padding: "8px" }}>
            {data.name.fname}
          </TableCell>
          <TableCell style={{ border: "1px solid black", padding: "8px" }}>
            {data.name.lname}
          </TableCell>
          <TableCell
            align="center"
            style={{ border: "1px solid black", padding: "8px" }}
          >
            {data.age}
          </TableCell>
          <TableCell
            align="center"
            style={{ border: "1px solid black", padding: "8px" }}
          >
            {data.gender}
          </TableCell>
          <TableCell
            align="center"
            style={{ border: "1px solid black", padding: "8px" }}
          >
            {data.address}
          </TableCell>
        </TableRow>
      );
    },
  }}
/>;

    Expected Result:
    Output

    Edit on Expo Snack

    NPM Package: https://www.npmjs.com/package/material-table
    Package Git Repo: https://github.com/mbrn/material-table

    Login or Signup to reply.
  2. 0

    You need to provide a colSpan property to the TableCell component.

    <TableRow>
   <TableCell align="center" colSpan={2}>
       Country
   </TableCell>
   <TableCell align="center" colSpan={3}>
       Details
   </TableCell>
</TableRow>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search