Home

Awesome

Table tool

The Table Block for the Editor.js. Finally improved.

Installation

Get the package

yarn add @editorjs/table

Include module at your application

import Table from '@editorjs/table'

Optionally, you can load this tool from CDN JsDelivr CDN

Usage

Add a new Tool to the tools property of the Editor.js initial config.

import Table from '@editorjs/table';

var editor = EditorJS({
  tools: {
    table: Table,
  }
});

Or init the Table tool with additional settings

var editor = EditorJS({
  tools: {
    table: {
      class: Table,
      inlineToolbar: true,
      config: {
        rows: 2,
        cols: 3,
        maxRows: 5,
        maxCols: 5,
      },
    },
  },
});

Config Params

FieldTypeDescription
rowsnumberinitial number of rows. 2 by default
colsnumberinitial number of columns. 2 by default
maxRowsnumbermaximum number of rows. 5 by params
maxColsnumbermaximum number of columns. 5 by params
withHeadingsbooleantoggle table headings. false by default
stretchedbooleanwhether the table is stretched to fill the full width of the container

Output data

This Tool returns data in the following format

FieldTypeDescription
withHeadingsbooleanUses the first line as headings
stretchedbooleanwhether the table is stretched to fill the full width of the container
contentstring[][]two-dimensional array with table contents
{
  "type" : "table",
  "data" : {
    "withHeadings": true,
    "stretched": false,
    "content" : [ [ "Kine", "Pigs", "Chicken" ], [ "1 pcs", "3 pcs", "12 pcs" ], [ "100$", "200$", "150$" ] ]
  }
}

CSP support

If you're using Content Security Policy (CSP) pass a nonce via <meta property="csp-nonce" content={{ nonce }} /> in your document head.

Support maintenance 🎖

If you're using this tool and editor.js in your business, please consider supporting their maintenance and evolution.

http://opencollective.com/editorjs

About CodeX

<img align="right" width="120" height="120" src="https://codex.so/public/app/img/codex-logo.svg" hspace="50">

CodeX is a team of digital specialists around the world interested in building high-quality open source products on a global market. We are open for young people who want to constantly improve their skills and grow professionally with experiments in leading technologies.

🌐Join 👋TwitterInstagram
codex.socodex.so/join@codex_team@codex_team