grapesjs-table

DEMO

$3

``
- GrapesJS v0.13.8 or higher
`

$3

`html
href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
rel="stylesheet"
/>




`

$3

`js
const editor = grapesjs.init({
container: "#gjs",
height: "100%",
fromElement: true,
storageManager: false,
plugins: ["grapesjs-table"],
});
`

$3

`css
body,
html {
margin: 0;
height: 100%;
}
`

Summary

- Plugin name: grapesjs-table
- Components
- table - Main table component
- tablebody - Component which contains table body
- tableFooter - Component which contains table footer
- tableHead - Component which contains table header
- Blocks
- table

Options

| Option | Description | Default |
| ------------------ | ------------------------------------------------------------------------------------------------ | ---------------------------------- |
| tableBlock | Object to extend the default table block, eg. { label: 'table', attributes: { ... } } |
| tableProps | Object to extend the default table properties, eg. { name: 'My table', droppable: false, ... } | {} |
| bodyProps | Object to extend the default table body properties | {} |
| headProps | Object to extend the default table head properties | {} |
| footerProps | Object to extend the default table footer properties | {} |
| attrTable | Table attribute identifier (main component) | data-table |
| attrTableBody | Table body attribute identifier | data-tbody |
| attrTableFooter | Table footer attribute identifier | data-tfoot |
| attrTableHeader | Table Head attribute identifier | data-thead |
| classTable | Default class to use on table | table |
| classTableBody | Default class to use on table body | table-body |
| classTableFooter | Default class to use on table body footer | table-footer |
| classTableHeader | Default class to use on table body header | table-header |
| style | Default style for table | table { .... (check the source) |

Download

- CDN
- https://unpkg.com/grapesjs-table
- NPM
- npm i grapesjs-table
- GIT
- git clone https://github.com/anubhavjain786/grapesjs-table.git

Usage

Directly in the browser

`html
href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
rel="stylesheet"
/>




`

Modern javascript

`js
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-table';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
container : '#gjs',
// ...
plugins: [plugin],
pluginsOpts: {
[plugin]: { / options / }
}
// or
plugins: [
editor => plugin(editor, { / options / }),
],
});
`

Development

Clone the repository

`sh
$ git clone https://github.com/anubhavjain786/grapesjs-table.git
$ cd grapesjs-table
`

Install dependencies

`sh
$ npm i
`

Start the dev server

`sh
$ npm start
`

Build the source

`sh
$ npm run build
``

License

MIT