Adding header and footer spans

Adding header and footer column spans

To add headers and footers that span multiple columns, use the columns property. You need to specify the number of spanned columns as the value of the colspan parameter in the header or/and footer object.

const { data } = getData();

const columns = [
  { id: "id", width: 50, footer: { text: "All users", colspan: 7 } },
  {
    id: "firstName",
    header: [
      {
        text: "Main client info",
        colspan: 5,
        collapsible: true,
        open: true,
      },
      {
        text: "User",
        colspan: 2,
        collapsible: true,
        open: true,
      },
      { text: "First Name" },
    ],
    width: 150,
  },
  {
    id: "lastName",
    header: ["", "", "Last Name"],
    width: 150,
  },
  {
    id: "companyName",
    header: [
      "",
      {
        text: "Company",
        colspan: 2,
        collapsible: true,
      },
      { text: "Name" },
    ],
  },
];

export default function App() {
  const api = useRef(null);

  return (
    <div style={{ padding: '20px' }}>
      <div>
        <Grid data={data} columns={columns} />
      </div>
    </div>
  );
}

Adding header and footer row spans

To add headers and footers that span multiple rows, you should specify the number of spanned rows as the value of the rowspan parameter in the header or/and footer object.

const { data } = getData();

const columns = [
  { id: "id", width: 50 },
  {
    id: "firstName",
    header: [
      { text: "Main client info", colspan: 5 },
      { text: "User", colspan: 2 },
    ],
    width: 150,
  },
  {
    id: "lastName",
    header: "Last Name",
    footer: "Last Name",
    width: 150,
    options: [{ id: "1", name: "Ciara Towne" }],
  },
  {
    id: "email",
    header: ["", { text: "Email", rowspan: 2, css: "center" }],
  },
  { id: "companyName", header: "Company", footer: "Company" },
  { id: "stars", header: "Stars", width: 150 },
];

export default function App() {
  const api = useRef(null);

  return (
    <div style={{ padding: "20px" }}>
      <div>
        <Grid data={data} columns={columns} api={api} />
      </div>
    </div>
  );
}