Ckeditor5: Configure table border property and tables/columns width

[dkrahn]

Is this a bug report or feature request? (choose one)

🆕 Feature request

I am in need of a way to configure the tables border(can be just with or without borders) and also set the tables and columns width in percentage.

[oleq]

I am in need of a way to configure the tables border(can be just with or without borders)

That would be handled in https://github.com/ckeditor/ckeditor5-table/issues/105.

also set the tables and columns width in percentage.

Could you tell us more about this feature? What output would like to see in data? What sort of UI would be the best for the users in your opinion?

[dkrahn]

Could you tell us more about this feature? What output would like to see in data? What sort of UI would be the best for the users in your opinion?

The result on html table/columns, would be style with the width attribute:

<table style="width:100%">
  <tbody>
    <tr>
      <td style="width: 40%">
        Text on column 1
      </td>
      <td style="width: 60%">
        Text on column 2
      </td>
    </tr>
  </tbody>
</table>

About the UI, it could be as in CK4 with a properties window, or it could go in the table toolbar, with an added dropdown for table editing, allowing the same behavior as the link edit.
But I am not a designer to tell if any of these ideas are good, but it is what crossed my mind.

[oleq]

Columns resize in CKEditor 4 works only via mouse drag&drop (demo) would that be enough for your application? (it's not precise, "percent–perfect")

[dkrahn]

Columns resize in CKEditor 4 works only via mouse drag&drop (demo) would that be enough for your application? (it's not precise, "percent–perfect")

It would be perfect.

[dkrahn]

Columns resize in CKEditor 4 works only via mouse drag&drop (demo)

Actually there is an option, but I do not need it.
Right click the desired cell > Cell > Cell properties

[deepanjandas]

How can the column width be set for tables in ckeditor5?

[gastonmunoz]

I make a plugin to border or no border in ckeditor5!

Plugin:

import ButtonView from "@ckeditor/ckeditor5-ui/src/button/buttonview";
import { IPlugin } from "../interfaces/iplugin.interface";
import { TableBorderCommand } from "../commands/table-border.command";
import { ReportElement } from "../report-elements.enum";

export class TableBorderPlugin implements IPlugin {
    public static key = "table-border";

    constructor(private editor: any) {
    }

    public init(): Promise<any> {
        let key = TableBorderPlugin.key;
        let editor = this.editor;
        editor.commands.add(key, new TableBorderCommand(editor));
        editor.model.schema.extend(ReportElement.table, { allowAttributes: "class" });
        editor.conversion.attributeToAttribute({ model: "class", view: "class" });
        editor.ui.componentFactory.add(key, (locale) => {
            let button = new ButtonView(locale);

            button.set({
                label: "Agregar/Quitar borde",
                icon: "table.svg",
                tooltip: true
            });

            button.on("execute", () => {
                editor.execute(key);
            });

            return button;
        });

        return null;
    }
}

Command:

import * as tableFuncs from "@ckeditor/ckeditor5-table/src/commands/utils";
import toMap from "@ckeditor/ckeditor5-utils/src/tomap";
import { IWriter } from "../interfaces/iwriter.interface";
import { ReportElement } from "../report-elements.enum";

export class TableBorderCommand {
    private validElements = [ReportElement.tableRow, ReportElement.tableCell, ReportElement.table];

    constructor(private editor: any) {
    }

    private addClassToNodes(node: any, writer: IWriter): void {
        if (this.validElements.indexOf(node.name) > -1) {
            let attributes = toMap(node.getAttributes());
            if (attributes.has("class")) {
                writer.removeAttribute("class", node);
            } else {
                writer.setAttribute("class", "no-border", node);
            }
            let childCount = node.childCount;
            for (let i = 0; i < childCount; i++) {
                let child = node._children.getNode(i);
                this.addClassToNodes(child, writer);
            }
        }
    }

    public execute(): void {
        let model = this.editor.model;
        let selection = model.document.selection;
        let tableCell = tableFuncs.findAncestor(ReportElement.tableCell, selection.getFirstPosition());
        let tableRow = tableCell.parent;
        let table = tableRow.parent;

        model.change((writer: IWriter) => {
            this.addClassToNodes(table, writer);
        });
    }
}

CSS:

.no-border {
    border: none !important;
    box-shadow: none !important;
}

[gastonmunoz]

One question, are you going to do this feature? Because I need it in my project

[mlewand]

@gastonmunoz currently it's not on our todo list. Best thing I can suggest is to add a 👍 reaction to main post in order to bump the issue.

[Reinmar]

@jodator isn't this ticket a DUP of what you're working on right now? Do you have a ticket for your current scope of work?

[jodator]

@Reinmar yes - it looks like part of the https://github.com/ckeditor/ckeditor5/issues/3287. But nothing more granular.

[Reinmar]

OK, so let's close this as a DUP.