customize color column

RalCarbono

I want to add a column and be able to customize the color of it, can this be done?

tasha

Hello RalCarbono

To be able to customize the style of the column you can rewrite the build-in styles of the .wx-cell style using the attribute:

.demo .wx-cell[data-col-id='duration'] {
  background-color: #e3e374;
  height: 38px;
  line-height: 38px;
  border-bottom: var(--wx-table-cell-border);
}

Please check the example: https://stackblitz.com/edit/vitejs-vite-xaoxjhav?file=src%2FGanttComponent.jsx,src%2Findex.css

RalCarbono

Thank you this is very helpful

RalCarbono

I also have another question, if I want to remove the action column I can do it,
and I could add columns with custom icons?

tasha

To remove the action column you can set thewidth: 1 in the columns config:

 {
      id: 'action',
      header: '',
      width: 1,
      align: 'center',
 }

Please check the example: https://stackblitz.com/edit/vitejs-vite-xaoxjhav?file=src%2FGanttComponent.jsx

As for adding the columns with custom icons if you use Svelte Gantt you can do it with the help of cell property of the columns config:

	const columns = [
		{ id: "text", header: "Task name", width: 220 },
		{ id: "assigned", header: "Assigned", width: 160, cell: AvatarCell },
		{ id: "start", header: "Start Date", width: 100 },
	];

The result will look like this: https://docs.svar.dev/svelte/gantt/samples/#/grid-custom-columns/willow

But if you use React Gantt unfortunately now React Gantt doesn't support this functionality.