Skip to main content

Configuring the table sizes

Setting column sizes​

The widget allows you to:

  • set fixed width of particular columns
  • set default width of all columns
  • adjust columns width so that a table fills the available page width

Setting the width of a particular column​

To change the width of a particular column, use the width parameter of the columns property.

Example:

const { data } = getData();

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

export default function App() {
    return <Grid data={data} columns={columns} />;
}

Setting default columns width​

To change the width of all columns in a table, set the colWidth parameter value of the sizes property.

const { data, columns } = getData();

export default function App() {
    let sizes = {
        colWidth: 190, //pixels
    }

    return (
        <Grid data={data} sizes={sizes} columns={columns} />
    );
}

Adjusting columns width to available space​

To make the table fill the full page space and specify how much space (width) relative to the table width a particular column will take (it will take no effect on columns with the set width), use the flexgrow parameter of the columns property.

The value is specified as a number, i.e., if flexgrow is set to 1 in one column only, the column will take the full available table width.

Example:

import { Grid } from "@wx/react-grid";
import { getData } from "./common/data";
const { data } = getData();

const columns = [
    { id: "id", width: 50 },
    { id: "city", header: "City", width: 160 },
    { id: "firstName", header: "First Name", flexgrow: 1 },
    { id: "lastName", header: "Last Name", flexgrow: 1 },
    { id: "companyName", header: "Company", flexgrow: 2 },
];

export default function App() {
    return <Grid data={data} columns={columns} />;
}

Setting header/footer sizes​

You can set header/footer default height and autoheight.

Changing default height​

To change default height of all headers/footers, set the headerHeightor footerHeight parameters of the sizes property to the required values in pixels:

const { data, columns } = getData();

let sizes = {
    headerHeight: 30,
    footerHeight: 30,
};

export default function App() {
    return (
        <Grid data={data} sizes={sizes} columns={columns} footer={true} />
    );
}

Setting autoheight​

To let a header automatically adjust to its content, set the autoheight parameter value of the columns property to true (default).

const { data } = getData();

const columns = [
    { id: "id", width: 50, footer: { text: "All users", colspan: 7 } },
    {
        id: "firstName",
        header: [
            {
                text: "Main client information",
                colspan: 5,
                autoheight: true,
            },
            { text: "User", colspan: 2 },
            { text: "First Name" },
        ],
        width: 150,
    },
];

export default function App() {
    return <Grid data={data} columns={columns} />;
}

Setting rows height​

To change default rows height, use the rowHeight parameter of the sizes property.

const { data, columns } = getData();

export default function App() {
    let sizes = {
        rowHeight: 40,
    };

    return <Grid data={data} columns={columns} sizes={sizes} />;
}

Enabling autoRowHeight​

To enable the autosizing of the rows height, apply the autoRowHeight property.

const { data, columns } = getData();

export default function App() {
    return <Grid data={data} columns={columns} autoRowHeight />;
}