Adding and hiding columns

Adding columns

To add columns to the table, add an object with column settings to the columns array.

import { Grid } from "@svar-ui/react-grid";
import { getData } from "./common/data";
import { useState } from "react";

export default function Example() {
  const { data: initialData } = getData();
  const [data] = useState(initialData);

  const columns = [
    { id: "id", width: 50 },
    { id: "firstName", header: "First Name", footer: "First Name", width: 150 },
    { id: "email", header: "Email", footer: "Email" },
    { id: "companyName", header: "Company", footer: "Company" },
    { id: "stars", header: "Stars", width: 150 },
    { id: "date", header: "Date", width: 150 },
  ];

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

Hiding columns

To hide a column, set the hidden parameter of the columns property to true.

Example:

import { Grid } from "@svar-ui/react-core";
import { getData } from "./common/data";
import { useState } from "react";

export default function Example() {
  const { data: initialData } = getData();
  const [data] = useState(initialData);

  const columns = [
    { id: "id", width: 50 },
    {
      id: "city",
      header: "City",
      width: 160,
      hidden: true,
    },
  ];

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