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 headerHeight
or 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 />;
}