Autoconfiguring columns

The component allows you to quickly create the table structure by setting only one parameter without the need to define columns configuration manually. The feature is intended to help create a table structure with default settings or applying only basic columns settings (i.e., the columns property parameters that are primitive data types, such as number, boolean or string).

To create a table with a ready-made structure, import your data and set the autoConfig prop to true, and all columns will automatically inherit the default columns property settings. All columns will be created based on the first object in the data array.

Example:

import { Grid } from "@svar-ui/react-grid";

export default function Example() {
  const data = [
    {
      // columns will be created based on this first object
      id: 1,
      city: "Amieshire",
      country: 6,
      email: "Leora13@yahoo.com",
      firstName: "Ernest",
      lastName: "Schuppe",
      street: "Ratke Port",
      zipCode: "17026-3154",
      date: new Date("2016-09-23T07:57:40.195Z"),
      companyName: "Lebsack - Nicolas",
      stars: 820,
      followers: 70,
      newsletter: true,
      checked: 1,
    },
    {
      id: 6,
      city: "Amieshire",
      country: 2,
      email: "Cody.Schultz56@gmail.com",
      firstName: "Alessandra",
      lastName: "Feeney",
      street: "Mosciski Estate",
      zipCode: "81514",
      date: new Date("2016-06-30T05:23:18.734Z"),
      companyName: "Nikolaus and Sons",
      stars: 3209,
      followers: 2780,
    },
  ];

  return <Grid data={data} autoConfig={true} />;
}

It's also possible to redefine the default columns settings and set basic columns settings in the autoConfig object (i.e., set the columns property parameters that are primitive data types, such as number, boolean or string). All these settings will be applied to all columns.

Example:

import { Grid } from "@svar-ui/react-grid";

export default function ExampleConfig() {
  const data = getData(); // or your data source
  const config = { editor: "text", sort: true };

  return (
    <div style={{ padding: 20 }}>
      <div style={{ height: 620, maxWidth: 800 }}>
        <Grid data={data} autoConfig={config} />
      </div>
    </div>
  );
}

---

Related sample: Automatically generated columns