Skip to main content

columns

Description​

An array of objects with configuration parameters for columns

Usage​

columns?: [
  {
    width?: number,
    align?: "left" | "right" | "center",
    flexgrow?: number,
    header: string,
    id: string,
    sort?: boolean,
    template?: {
        (b: any): string;
    };
  } 
] | false;

Parameters​

  • flexgrow - (optional) specifies how much space (width) relative to the grid width the column will take (it will take no effect on columns with the set width); the property is specified as a number (if flexgrow is set to 1 in one column only, the column will take the full available width)
  • width - (optional) the column width value from here; the default value is "120px"
  • align - (optional) the text align value from here; the default value is "left"
  • header - (required) the label for a column header
  • id - (required) column id
  • sort - (optional) if set to true (default), enables sorting in a column; if false, the sorting is disabled
  • template - (optional) applies a template to a column; it's a function that takes an object and returns a string.

The columns property can be set to false to hide the tasks tree area.

Default config​

[
    { id: "text", header: "Task name", flexGrow: 1, sort: true },
    { id: "start", header: "Start date", align: "center", sort: true },
    { id: "duration", header: "Duration", width: 90, align: "center", sort: true },
    { id: "action", header: "", width: 50, align: "center" },
];

Example​

import { getData } from "./common/data";
import { Gantt } from "../src/";

const data = getData();

const columns = [
  { id: "text", header: "Task name", flexgrow: 2 },
  {
    id: "start",
    header: "Start date",
    flexgrow: 1,
    align: "center",
  },
  {
    id: "duration",
    header: "Duration",
    align: "center",
    flexgrow: 1,
  },
  {
    id: "action",
    header: "",
    width: 50,
    align: "center",
  },
];

function App() {
  return (
    <Gantt tasks={data.tasks} links={data.links} scales={data.scales} columns={columns} />
  );
}

export default App;

In the next example the area with tasks tree is hidden by setting columns to false:

import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const App = () => {
  const data = getData();

  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
      columns={false}
    />
  );
};

export default App;