This content originally appeared on DEV Community and was authored by Horace Karatu
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
This content originally appeared on DEV Community and was authored by Horace Karatu
Horace Karatu | Sciencx (2025-01-11T19:22:48+00:00) Adding and Customizing Tables in React Quill. Retrieved from https://www.scien.cx/2025/01/11/adding-and-customizing-tables-in-react-quill/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.