Skip to content

Commit add526c

Browse files
nperez0111nperez0111
authored
feat(tables): overhaul table cells (#1429)
This includes support for table headers, table cell backgrounds, text color, splitting and merging of cells.
1 parent 1822208 commit add526c

File tree

114 files changed

+18350
-4826
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

114 files changed

+18350
-4826
lines changed

Diff for: ‎examples/03-ui-components/15-advanced-tables/.bnexample.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"playground": true,
3+
"docs": true,
4+
"author": "nperez0111",
5+
"tags": ["Intermediate", "UI Components", "Tables", "Appearance & Styling"]
6+
}

Diff for: ‎examples/03-ui-components/15-advanced-tables/App.tsx

+305
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,305 @@
1+
import "@blocknote/core/fonts/inter.css";
2+
import { BlockNoteView } from "@blocknote/mantine";
3+
import "@blocknote/mantine/style.css";
4+
import { useCreateBlockNote } from "@blocknote/react";
5+
6+
export default function App() {
7+
// Creates a new editor instance.
8+
const editor = useCreateBlockNote({
9+
// This enables the advanced table features
10+
tables: {
11+
splitCells: true,
12+
cellBackgroundColor: true,
13+
cellTextColor: true,
14+
headers: true,
15+
},
16+
initialContent: [
17+
{
18+
id: "7e498b3d-d42e-4ade-9be0-054b292715ea",
19+
type: "heading",
20+
props: {
21+
textColor: "default",
22+
backgroundColor: "default",
23+
textAlignment: "left",
24+
level: 2,
25+
},
26+
content: [
27+
{
28+
type: "text",
29+
text: "Advanced Tables",
30+
styles: {},
31+
},
32+
],
33+
children: [],
34+
},
35+
{
36+
id: "cbf287c6-770b-413a-bff5-ad490a0b562a",
37+
type: "table",
38+
props: {
39+
textColor: "default",
40+
},
41+
content: {
42+
type: "tableContent",
43+
columnWidths: [199, 148, 201],
44+
headerRows: 1,
45+
rows: [
46+
{
47+
cells: [
48+
{
49+
type: "tableCell",
50+
content: [
51+
{
52+
type: "text",
53+
text: "This row has headers",
54+
styles: {},
55+
},
56+
],
57+
props: {
58+
colspan: 1,
59+
rowspan: 1,
60+
backgroundColor: "default",
61+
textColor: "default",
62+
textAlignment: "center",
63+
},
64+
},
65+
{
66+
type: "tableCell",
67+
content: [
68+
{
69+
type: "text",
70+
text: "This is ",
71+
styles: {},
72+
},
73+
{
74+
type: "text",
75+
text: "RED",
76+
styles: {
77+
bold: true,
78+
},
79+
},
80+
],
81+
props: {
82+
colspan: 1,
83+
rowspan: 1,
84+
backgroundColor: "red",
85+
textColor: "default",
86+
textAlignment: "center",
87+
},
88+
},
89+
{
90+
type: "tableCell",
91+
content: [
92+
{
93+
type: "text",
94+
text: "Text is Blue",
95+
styles: {},
96+
},
97+
],
98+
props: {
99+
colspan: 1,
100+
rowspan: 1,
101+
backgroundColor: "default",
102+
textColor: "blue",
103+
textAlignment: "center",
104+
},
105+
},
106+
],
107+
},
108+
{
109+
cells: [
110+
{
111+
type: "tableCell",
112+
content: [
113+
{
114+
type: "text",
115+
text: "This spans 2 columns\nand 2 rows",
116+
styles: {},
117+
},
118+
],
119+
props: {
120+
colspan: 2,
121+
rowspan: 2,
122+
backgroundColor: "yellow",
123+
textColor: "default",
124+
textAlignment: "left",
125+
},
126+
},
127+
{
128+
type: "tableCell",
129+
content: [
130+
{
131+
type: "text",
132+
text: "Sooo many features",
133+
styles: {},
134+
},
135+
],
136+
props: {
137+
colspan: 1,
138+
rowspan: 1,
139+
backgroundColor: "gray",
140+
textColor: "default",
141+
textAlignment: "left",
142+
},
143+
},
144+
],
145+
},
146+
{
147+
cells: [
148+
{
149+
type: "tableCell",
150+
content: [],
151+
props: {
152+
colspan: 1,
153+
rowspan: 1,
154+
backgroundColor: "gray",
155+
textColor: "purple",
156+
textAlignment: "left",
157+
},
158+
},
159+
],
160+
},
161+
{
162+
cells: [
163+
{
164+
type: "tableCell",
165+
content: [
166+
{
167+
type: "text",
168+
text: "A cell",
169+
styles: {},
170+
},
171+
],
172+
props: {
173+
colspan: 1,
174+
rowspan: 1,
175+
backgroundColor: "default",
176+
textColor: "default",
177+
textAlignment: "left",
178+
},
179+
},
180+
{
181+
type: "tableCell",
182+
content: [
183+
{
184+
type: "text",
185+
text: "Another Cell",
186+
styles: {},
187+
},
188+
],
189+
props: {
190+
colspan: 1,
191+
rowspan: 1,
192+
backgroundColor: "default",
193+
textColor: "default",
194+
textAlignment: "right",
195+
},
196+
},
197+
{
198+
type: "tableCell",
199+
content: [
200+
{
201+
type: "text",
202+
text: "Aligned center",
203+
styles: {},
204+
},
205+
],
206+
props: {
207+
colspan: 1,
208+
rowspan: 1,
209+
backgroundColor: "default",
210+
textColor: "default",
211+
textAlignment: "center",
212+
},
213+
},
214+
],
215+
},
216+
],
217+
},
218+
children: [],
219+
},
220+
{
221+
id: "16e76a94-74e5-42e2-b461-fc9da9f381f7",
222+
type: "paragraph",
223+
props: {
224+
textColor: "default",
225+
backgroundColor: "default",
226+
textAlignment: "left",
227+
},
228+
content: [
229+
{
230+
type: "text",
231+
text: "Featuring:",
232+
styles: {},
233+
},
234+
],
235+
children: [
236+
{
237+
id: "785fc9f7-8554-47f4-a4df-8fe2f1438cac",
238+
type: "bulletListItem",
239+
props: {
240+
textColor: "default",
241+
backgroundColor: "default",
242+
textAlignment: "left",
243+
},
244+
content: [
245+
{
246+
type: "text",
247+
text: "Cell background & foreground coloring",
248+
styles: {},
249+
},
250+
],
251+
children: [],
252+
},
253+
{
254+
id: "1d0adf08-1b42-421a-b9ea-b3125dcc96d9",
255+
type: "bulletListItem",
256+
props: {
257+
textColor: "default",
258+
backgroundColor: "default",
259+
textAlignment: "left",
260+
},
261+
content: [
262+
{
263+
type: "text",
264+
text: "Splitting & merging cells",
265+
styles: {},
266+
},
267+
],
268+
children: [],
269+
},
270+
{
271+
id: "99991aa7-9d86-4d06-9073-b1a9c0329062",
272+
type: "bulletListItem",
273+
props: {
274+
textColor: "default",
275+
backgroundColor: "default",
276+
textAlignment: "left",
277+
},
278+
content: [
279+
{
280+
type: "text",
281+
text: "Header row & column",
282+
styles: {},
283+
},
284+
],
285+
children: [],
286+
},
287+
],
288+
},
289+
{
290+
id: "c7bf2a7c-8972-44f1-acd8-cf60fa734068",
291+
type: "paragraph",
292+
props: {
293+
textColor: "default",
294+
backgroundColor: "default",
295+
textAlignment: "left",
296+
},
297+
content: [],
298+
children: [],
299+
},
300+
],
301+
});
302+
303+
// Renders the editor instance using a React component.
304+
return <BlockNoteView editor={editor}></BlockNoteView>;
305+
}

Diff for: ‎examples/03-ui-components/15-advanced-tables/README.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Advanced Tables
2+
3+
This example enables the following features in tables:
4+
5+
- Split cells
6+
- Cell background color
7+
- Cell text color
8+
- Table row and column headers
9+
10+
**Relevant Docs:**
11+
12+
- [Tables](/docs/editor-basics/tables)
13+
- [Editor Setup](/docs/editor-basics/setup)

Diff for: ‎examples/03-ui-components/15-advanced-tables/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html lang="en">
2+
<head>
3+
<script>
4+
<!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
5+
</script>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Advanced Tables</title>
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="./main.tsx"></script>
13+
</body>
14+
</html>

Diff for: ‎examples/03-ui-components/15-advanced-tables/main.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
2+
import React from "react";
3+
import { createRoot } from "react-dom/client";
4+
import App from "./App";
5+
6+
const root = createRoot(document.getElementById("root")!);
7+
root.render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>
11+
);

Diff for: ‎examples/03-ui-components/15-advanced-tables/package.json

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "@blocknote/example-advanced-tables",
3+
"description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
4+
"private": true,
5+
"version": "0.12.4",
6+
"scripts": {
7+
"start": "vite",
8+
"dev": "vite",
9+
"build": "tsc && vite build",
10+
"preview": "vite preview",
11+
"lint": "eslint . --max-warnings 0"
12+
},
13+
"dependencies": {
14+
"@blocknote/core": "latest",
15+
"@blocknote/react": "latest",
16+
"@blocknote/ariakit": "latest",
17+
"@blocknote/mantine": "latest",
18+
"@blocknote/shadcn": "latest",
19+
"react": "^18.3.1",
20+
"react-dom": "^18.3.1"
21+
},
22+
"devDependencies": {
23+
"@types/react": "^18.0.25",
24+
"@types/react-dom": "^18.0.9",
25+
"@vitejs/plugin-react": "^4.3.1",
26+
"eslint": "^8.10.0",
27+
"vite": "^5.3.4"
28+
},
29+
"eslintConfig": {
30+
"extends": [
31+
"../../../.eslintrc.js"
32+
]
33+
},
34+
"eslintIgnore": [
35+
"dist"
36+
]
37+
}

0 commit comments

Comments
 (0)