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.
Top comments (4)
What would you recommend for lists
list are much simple to built I use a custom blot for that, I build my list externally and through the Blot I insert it into the editor
Could you please share the list blot code with me? The default list in quill don't nest properly for my case.
being stuck on this problem for weeks, finally a solution, Thanks