Adding and hiding columns

Adding columns

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

const data = getData().data;

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 },
];

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

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

Hiding columns

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

Example:

import { Grid } from "@xbs/react-wx"; 
import { getData } from "./common/data";

const { data } = getData();

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

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