canvas-datagrid
canvas-datagrid copied to clipboard
how to adjust column header width from title ?
Hi, is there a properties or function to set automatically width of all column header ?
In this exemple, i would like to get ride of the exceeding padding
My data grid style :
const dataGridStyle = {
// Grid
columnHeaderCellHeight : 30,
gridBorderWidth: 0,
gridBorderColor: "ffffff00",
gridBackgroundColor: "#ffffff",
// Cell
cellHeight: 30,
cellColor: GREY,
cellHorizontalAlignment: "right",
cellBackgroundColor : "#ffffff",
cellBorderColor: GREY_LIGHTEN_4,
cornerCellBackgroundColor: GREY_LIGHTEN_4,
cornerCellBorderColor: "#ffffff",
activeCellBorderColor: SECONDARY_COLOR,
activeCellBackgroundColor: "#ffffff",
activeCellHorizontalAlignment: "right",
activeCellOverlayBorderColor: SECONDARY_COLOR,
activeCellSelectedBackgroundColor: "#ffffff",
editCellBackgroundColor: "#ffffff",
// Colum header
columnHeaderCellCapBackgroundColor: GREY_LIGHTEN_4,
columnHeaderCellCapBorderColor: '#ffffff',
columnHeaderCellColor: GREY,
columnHeaderCellBackgroundColor: GREY_LIGHTEN_4,
columnHeaderCellBorderColor: "#ffffff",
columnHeaderCellHorizontalAlignment: "center",
activeColumnHeaderCellBackgroundColor: GREY_LIGHTEN_4,
activeColumnHeaderCellColor: GREY,
autosizeHeaderCellPadding: 0,
//Row header
rowHeaderCellBackgroundColor: GREY_LIGHTEN_4,
rowHeaderCellColor: GREY,
rowHeaderCellBorderColor: "#ffffff",
rowHeaderCellHorizontalAlignment: "center",
activeRowHeaderCellBackgroundColor : GREY_LIGHTEN_4,
activeRowHeaderCellColor : GREY,
// SelectionOverlay
selectionOverlayBorderColor: PRIMARY_COLOR
}
and instantiation :
dataGrid = canvasDatagrid({
data: [],
schema: schema,
style : dataGridStyle,
showNewRow: true,
});
cosmoInput.firstElementChild.append(dataGrid);
// Needed to be set after datagrid input has been mounted
dataGrid.style.width = "100%";
dataGrid.style.height = "auto";
dataGrid.style.overflowX = "auto";
Thanks