canvas-datagrid icon indicating copy to clipboard operation
canvas-datagrid copied to clipboard

how to adjust column header width from title ?

Open KevinFabre opened this issue 4 years ago • 0 comments

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 Capture d’écran du 2020-09-03 15-33-34

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

KevinFabre avatar Sep 03 '20 13:09 KevinFabre