mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-08-06 13:38:49 +08:00
docs: add content to table pages
This commit is contained in:
Hans Pagel
parent
2bfe2f009f
commit
126894d9d1
@ -42,8 +42,8 @@
|
||||
<button @click="editor.chain().focus().mergeOrSplit().run()">
|
||||
mergeOrSplit
|
||||
</button>
|
||||
<button @click="editor.chain().focus().setCellAttributes({name: 'color', value: 'pink'}).run()">
|
||||
setCellAttributes
|
||||
<button @click="editor.chain().focus().setCellAttribute('color', 'pink').run()">
|
||||
setCellAttribute
|
||||
</button>
|
||||
<button @click="editor.chain().focus().fixTables().run()">
|
||||
fixTables
|
||||
@ -120,9 +120,6 @@ export default {
|
||||
}),
|
||||
],
|
||||
content: `
|
||||
<p>
|
||||
People
|
||||
</p>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
|
||||
@ -1,8 +1,26 @@
|
||||
# TableCell
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-table-cell)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-table-cell?minimal=true)
|
||||
|
||||
:::pro Fund the development 💖
|
||||
We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for this extension, [become a sponsor and fund open source](/sponsor).
|
||||
:::warning ⚠️ Preview
|
||||
Work in progress
|
||||
:::
|
||||
|
||||
TODO
|
||||
## Installation
|
||||
::: warning Use with Table, TableRow and TableHeader
|
||||
This extension requires the [`Table`](/api/nodes/table), [`TableRow`](/api/nodes/table-row) and [`TableHeader`](/api/nodes/table-header) nodes.
|
||||
:::
|
||||
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
|
||||
```
|
||||
|
||||
## Source code
|
||||
[packages/extension-table-cell/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-cell/)
|
||||
|
||||
## Usage
|
||||
<demo name="Nodes/Table" />
|
||||
|
||||
@ -1,8 +1,26 @@
|
||||
# TableHeader
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-table-header)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-table-header?minimal=true)
|
||||
|
||||
:::pro Fund the development 💖
|
||||
We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for this extension, [become a sponsor and fund open source](/sponsor).
|
||||
:::warning ⚠️ Preview
|
||||
Work in progress
|
||||
:::
|
||||
|
||||
TODO
|
||||
## Installation
|
||||
::: warning Use with Table, TableRow and TableCell
|
||||
This extension requires the [`Table`](/api/nodes/table), [`TableRow`](/api/nodes/table-row) and [`TableCell`](/api/nodes/table-cell) nodes.
|
||||
:::
|
||||
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
|
||||
```
|
||||
|
||||
## Source code
|
||||
[packages/extension-table-header/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-header/)
|
||||
|
||||
## Usage
|
||||
<demo name="Nodes/Table" />
|
||||
|
||||
@ -1,7 +1,26 @@
|
||||
# TableRow
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-table-row)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-table-row?minimal=true)
|
||||
|
||||
:::pro Fund the development 💖
|
||||
We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for this extension, [become a sponsor and fund open source](/sponsor).
|
||||
:::warning ⚠️ Preview
|
||||
Work in progress
|
||||
:::
|
||||
|
||||
TODO
|
||||
## Installation
|
||||
::: warning Use with Table, TableHeader and TableCell
|
||||
This extension requires the [`Table`](/api/nodes/table), [`TableHeader`](/api/nodes/table-header) and [`TableCell`](/api/nodes/table-cell) nodes.
|
||||
:::
|
||||
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
|
||||
```
|
||||
|
||||
## Source code
|
||||
[packages/extension-table-row/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-row/)
|
||||
|
||||
## Usage
|
||||
<demo name="Nodes/Table" />
|
||||
|
||||
@ -1,11 +1,58 @@
|
||||
# Table
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-table)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-table?minimal=true)
|
||||
|
||||
:::pro Fund the development 💖
|
||||
We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for this extension, [become a sponsor and fund open source](/sponsor).
|
||||
⚠️ Work in progress
|
||||
|
||||
## Installation
|
||||
::: warning Use with TableRow, TableHeader and TableCell
|
||||
This extension requires the [`TableRow`](/api/nodes/table-row), [`TableHeader`](/api/nodes/table-header) and [`TableCell`](/api/nodes/table-cell) nodes.
|
||||
:::
|
||||
|
||||
TODO
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
|
||||
|
||||
⚠️ Preview
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
|
||||
```
|
||||
|
||||
## Settings
|
||||
| Option | Type | Default | Description |
|
||||
| ----------------------- | --------- | ----------- | --------------------------------------------------------------------- |
|
||||
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
|
||||
| resizable | `Boolean` | `false` | |
|
||||
| handleWidth | `Number` | `5` | |
|
||||
| cellMinWidth | `Number` | `25` | |
|
||||
| View | `View` | `TableView` | |
|
||||
| lastColumnResizable | `Boolean` | `true` | |
|
||||
| allowTableNodeSelection | `Boolean` | `false` | |
|
||||
|
||||
## Commands
|
||||
| Command | Parameters | Description |
|
||||
| ------------------ | ---------------------------------------------- | ----------- |
|
||||
| insertTable | `{ rows = 3, cols = 3, withHeaderRow = true }` | |
|
||||
| addColumnBefore | – | |
|
||||
| addColumnAfter | – | |
|
||||
| deleteColumn | – | |
|
||||
| addRowBefore | – | |
|
||||
| addRowAfter | – | |
|
||||
| deleteRow | – | |
|
||||
| deleteTable | – | |
|
||||
| mergeCells | – | |
|
||||
| splitCell | – | |
|
||||
| toggleHeaderColumn | – | |
|
||||
| toggleHeaderRow | – | |
|
||||
| toggleHeaderCell | – | |
|
||||
| mergeOrSplit | – | |
|
||||
| setCellAttribute | `name`, `value` | |
|
||||
| goToNextCell | – | |
|
||||
| goToPreviousCell | – | |
|
||||
| fixTables | – | |
|
||||
|
||||
|
||||
## Source code
|
||||
[packages/extension-table/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table/)
|
||||
|
||||
## Usage
|
||||
<demo name="Nodes/Table" />
|
||||
|
||||
@ -129,7 +129,7 @@ export const Table = Node.create({
|
||||
|
||||
return splitCell(state, dispatch)
|
||||
},
|
||||
setCellAttributes: ({ name, value }: { name: string, value: any }): Command => ({ state, dispatch }) => {
|
||||
setCellAttribute: (name: string, value: any): Command => ({ state, dispatch }) => {
|
||||
return setCellAttr(name, value)(state, dispatch)
|
||||
},
|
||||
goToNextCell: (): Command => ({ state, dispatch }) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user