# GrapesJS Data Table Plugin

A GrapesJS plugin that allows you to easily import Excel files and display them as interactive data tables within your editor.

## Features

- Import Excel/Spreadsheet files (.xlsx, .xls, .numbers, etc.)
- Automatic conversion from Excel/Numbers to HTML tables.
- Insert code into the GrapesJS canvas.

## Installation

### Via CDN

Include the following scripts and styles in your HTML:

```html
<!-- GrapesJS Data Table Plugin Scripts -->
<script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>
<script src="path/to/index.js"></script>
```

### Via NPM
From command prompt `npm install`

Then simply run:
1. `npm run build`
2. `npm run start`

## Usage

Initialize the plugin in your GrapesJS configuration:

```javascript
const editor = grapesjs.init({
  container: '#gjs',
  // ... other options
  plugins: ['grapesjs-data-table'],
  pluginsOpts: {
    'grapesjs-data-table': {
       // optional; nothing required here
    }
  }
});
```

### How to use in the editor:

1. Drag the **Data Table** block from the Blocks panel into your canvas.
2. A modal will appear prompting you to upload an Excel/Numbers file.
3. Select your file. The plugin will display a preview of the data.
4. Click **Render Changes**.

## Configuration

No configuration is required.

## Important Notes & Limitations

- **Dependencies**: This plugin relies on [SheetJS (XLSX)](https://sheetjs.com/) for file parsing. 
- **Styling**: Basic padding is added to the rendered table. You can customize the look by targeting `#dataTableInserted` or `.grapesjs-data-table` in your CSS.
- **Single Table per Block**: Each Data Table block drag-and-drop session handles one file import.
data table

Data Tables

Related blog posts
