Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 320 Commits
.github/workflows		.github/workflows
assets		assets
src		src
.eslintignore		.eslintignore
.eslintrc		.eslintrc
.gitignore		.gitignore
.npmignore		.npmignore
LICENSE		LICENSE
README.md		README.md
index.html		index.html
package.json		package.json
postcss.config.js		postcss.config.js
tsconfig.json		tsconfig.json
vite.config.js		vite.config.js
yarn.lock		yarn.lock

Repository files navigation

Table tool

The Table Block for theEditor.js. Finally improved.

Installation

Get the package

yarn add @editorjs/table

Include module at your application

importTablefrom'@editorjs/table'

Optionally, you can load this tool from CDNJsDelivr CDN

Usage

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

importTablefrom'@editorjs/table';vareditor=EditorJS({tools:{table:Table,}});

Or init the Table tool with additional settings

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

Config Params

Field	Type	Description
`rows`	`number`	initial number of rows.`2` by default
`cols`	`number`	initial number of columns.`2` by default
`maxRows`	`number`	maximum number of rows.`5` by params
`maxCols`	`number`	maximum number of columns.`5` by params
`withHeadings`	`boolean`	toggle table headings.`false` by default
`stretched`	`boolean`	whether the table is stretched to fill the full width of the container

Output data

This Tool returnsdata in the following format

Field	Type	Description
`withHeadings`	`boolean`	Uses the first line as headings
`stretched`	`boolean`	whether the table is stretched to fill the full width of the container
`content`	`string[][]`	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 anonce 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

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