Skip to main content

autoConfig

Description

Optional. Enables creating a table structure automatically with default or basic columns settings

Usage

autoConfig?: boolean | {};

Parameters

If autoConfig is set to true, the table structure will be created automatically with default columns property settings. The default value is false, which means that the structure should be defined manually using the columns property. All columns will automatically inherit the default columns property settings. All columns will be created based on the first object in the data array.

If autoConfig is an object, it can have the same parameters as the columns property. But be aware that the property is intended to create a structure with only basic columns settings (i.e., columns property parameters that are primitive data types, such as number, boolean or string).

Example

import { Grid } from "wx-react-grid";

const allData = [
{
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,
},
{
id: 2,
city: "Gust",
country: 4,
email: "Mose_Gerhold51@yahoo.com",
firstName: "Janis",
lastName: "Vandervort",
street: "Dickinson Keys",
zipCode: "43767",
date: new Date("2017-03-06T09:59:12.551Z"),
companyName: "Glover - Hermiston",
stars: 1200,
followers: 170,
checked: 1,
},
{
id: 3,
city: "Amieshire",
country: 3,
email: "Frieda.Sauer61@gmail.com",
firstName: "Makenzie",
lastName: "Bode",
street: "Legros Divide",
zipCode: "54812",
date: new Date("2016-12-08T13:44:26.557Z"),
companyName: "Williamson - Kassulke",
stars: 610,
followers: 170,
checked: 1,
},
];

const config = { editor: "text", sort: true };

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

return (
<Grid
data={allData}
autoConfig={config} />
);
}