Adding and Customizing Tables in React Quill

Tables are essential for structuring information in content editors. While React Quill, a React wrapper for QuillJS, is robust and extensible, it lacks built-in table support. This guide will show you how to integrate and customize table functionality in React Quill using third-party modules and configurations.

Why Use Tables in a Rich Text Editor?

Tables allow users to present data clearly and visually within content. They are particularly useful for:

• Organizing and comparing information.


• Structuring layouts for reports, blogs, or technical documentation.


• Enhancing overall content readability.

Integrating table support into React Quill extends its utility for users managing structured data.

Setting Up React Quill

Begin by installing React Quill into your project:

npm install react-quill

Import and configure React Quill in your component:

import React, { useState } from 'react';

import ReactQuill from 'react-quill';

import 'react-quill/dist/quill.snow.css';



const Editor = () => {

  const [value, setValue] = useState('');



  return (

    <ReactQuill theme="snow" value={value} onChange={setValue} />

  );

};



export default Editor;

Adding Table Support with quill-table

To add table functionality, use the quill-table module.

Install the Module

npm install quill-table

Configure the Table Module

Import and register the table module with Quill:

import ReactQuill, { Quill } from 'react-quill';

import 'react-quill/dist/quill.snow.css';

import Table from 'quill-table';

import 'quill-table/dist/quill.table.css';



Quill.register({

  'modules/table': Table,

});



const EditorWithTable = () => {

  const [value, setValue] = useState('');



  const modules = {

    toolbar: [

      [{ table: [] }],

      ['bold', 'italic', 'underline'],

      [{ list: 'ordered' }, { list: 'bullet' }],

    ],

    table: true,

  };



  return (

    <ReactQuill theme="snow" value={value} onChange={setValue} modules={modules} />

  );

};



export default EditorWithTable;

Add Toolbar Buttons

The toolbar configuration includes a table button, enabling users to insert and edit tables directly.

Customizing Table Styles

Use CSS to style tables:

.ql-table td {

  border: 1px solid #ddd;

  padding: 8px;

}



.ql-table th {

  background-color: #f4f4f4;

  text-align: left;

}

Extracting and Managing Table Data

React Quill outputs HTML content. To extract and manage table data, parse the editor's value:

const extractTablesFromHTML = (html) => {

  const parser = new DOMParser();

  const doc = parser.parseFromString(html, 'text/html');

  const tables = doc.querySelectorAll('table');

  return Array.from(tables).map((table) => table.outerHTML);

};



const handleSave = () => {

  const tableData = extractTablesFromHTML(value);

  console.log('Extracted Tables:', tableData);

};

Conclusion

Adding table support to React Quill enhances its functionality, making it more versatile for users who need structured content. The quill-table module provides tools for inserting and managing tables, while custom CSS and event handling enable further customization. With these steps, you can create a rich text editor tailored to your application's needs.

References