{props.children}
; 16 | case 'heading': returnThe page demonstrates the slate-deep-table plugin.
11 | 12 |Simple tables can still contain block-level content. This page is intentionally not using other plugins, but you could easily embed lists, images, or any other block-level content in cells.
14 | 15 ||
18 | Week 19 | |
20 |
21 | Assignments 22 | |
23 |
|
26 | August 21st 27 | |
28 |
29 | Introductory reading 30 |Pre-test One 31 | |
32 |
|
35 | August 28th 36 | |
37 |
38 | Discussion Question One 39 |Find partners for group project 40 |Begin Chapters 1-3 41 | |
42 |
Use Tab and Shift+Tab to move from cell to cells. Press Up/Down to navigate the rows.
46 | 47 |Headerless tables can be used for aligning columns. One-row tables are always headerless, but you can use the Toggle Headers button to hide or show headers on any table.
49 | 50 ||
53 | Gamma Quadrant 54 |- dominion, bad things 55 | |
56 |
57 | Delta Quadrant 58 |- flying cubes, space monocles with laser pointers 59 | |
60 |
|
63 | Alpha Quadrant 64 |- somewhat self-aggrandizing name 65 | |
66 |
67 | Beta Quadrant 68 |- Various empires 69 | |
70 |
If you so desire, you may even embed tables within tables.
75 | 76 ||
79 | vero 80 | |
81 |
82 | odio 83 | |
84 |
85 | blanditiis 86 | |
87 | ||||||
|
90 | cupiditate 91 | |
92 |
93 | maxime placeat facere 94 | |
95 |
96 |
|
123 | ||||||
|
126 | Itaque 127 | |
128 |
129 | rerum hic tenetur 130 | |
131 |
132 |
|
151 |
{props.children}
; 27 | case 'heading': return{children}
; 42 | default: return; 43 | } 44 | } 45 | if (obj.object == 'inline' && obj.type == 'link') { 46 | return {children}; 47 | } 48 | }, 49 | deserialize(el, next) { 50 | const tag = el.tagName.toLowerCase(); 51 | 52 | if (tag==='table') { 53 | const data = { headless: true } 54 | 55 | if ( 56 | el.firstElementChild && 57 | el.firstElementChild.tagName.toLowerCase()==='thead' 58 | ) { 59 | data.headless = false 60 | } 61 | 62 | return { 63 | object: "block", 64 | type: opts.typeTable, 65 | data: data, 66 | nodes: next(el.childNodes), 67 | } 68 | } 69 | 70 | const type = TABLE_CHILD_TAGS[tag]; 71 | 72 | if (type) { 73 | return { 74 | object: "block", 75 | type: type, 76 | data: {}, 77 | nodes: next(el.childNodes), 78 | } 79 | } 80 | } 81 | } 82 | ]; 83 | } 84 | 85 | module.exports = makeSerializerRules; -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | const insertTable = require('./changes/insertTable'); 2 | const insertTableByKey = require('./changes/insertTableByKey'); 3 | const insertTableByPath = require('./changes/insertTableByPath'); 4 | const insertRow = require('./changes/insertRow'); 5 | const removeRow = require('./changes/removeRow'); 6 | const insertColumn = require('./changes/insertColumn'); 7 | const removeColumn = require('./changes/removeColumn'); 8 | const removeTable = require('./changes/removeTable'); 9 | const moveTableSelection = require('./changes/moveSelection'); 10 | const moveTableSelectionBy = require('./changes/moveSelectionBy'); 11 | const toggleTableHeaders = require('./changes/toggleHeaders'); 12 | 13 | const TablePosition = require('./TablePosition'); 14 | const onTab = require('./onTab'); 15 | const onUpDown = require('./onUpDown'); 16 | const makeSchema = require('./makeSchema'); 17 | const makeRenderers = require('./defaultRenderers'); 18 | const makeSerializerRules = require('./defaultSerializers'); 19 | 20 | const KEY_TAB = 'Tab'; 21 | const KEY_DOWN = 'ArrowUp'; 22 | const KEY_UP = 'ArrowDown'; 23 | 24 | /** 25 | * @param {String} opts.typeTable The type of table blocks 26 | * @param {String} opts.typeRow The type of row blocks 27 | * @param {String} opts.typeCell The type of cell blocks 28 | * @param {String} opts.typeContent The type of default content blocks 29 | */ 30 | function EditTable(opts) { 31 | opts = opts || {}; 32 | opts.typeTable = opts.typeTable || 'table'; 33 | opts.typeRow = opts.typeRow || 'table_row'; 34 | opts.typeCell = opts.typeCell || 'table_cell'; 35 | opts.typeContent = opts.typeContent || 'paragraph'; 36 | 37 | /** 38 | * Is the selection in a table 39 | */ 40 | function isSelectionInTable(editor) { 41 | const { startBlock } = editor.value; 42 | if (!startBlock) return false; 43 | 44 | return TablePosition.isInCell(editor.value, startBlock, opts); 45 | } 46 | 47 | /** 48 | * Bind an editor command to our instance options as first arg 49 | */ 50 | function bindEditor(fn) { 51 | return function(editor, ...args) { 52 | if (!isSelectionInTable(editor)) { 53 | return editor; 54 | } 55 | 56 | return fn(...[opts, editor].concat(args)); 57 | }; 58 | } 59 | 60 | /** 61 | * User is pressing a key in the editor 62 | */ 63 | function onKeyDown(event, editor, next) { 64 | // Only handle events in cells 65 | if (!isSelectionInTable(editor)) { 66 | return next(); 67 | } 68 | 69 | // Build arguments list 70 | const args = [ event, editor, opts ]; 71 | 72 | switch (event.key) { 73 | case KEY_TAB: 74 | return onTab(...args); 75 | case KEY_DOWN: 76 | case KEY_UP: 77 | return onUpDown(...args); 78 | } 79 | return next(); 80 | } 81 | 82 | const { schema, normalizeNode } = makeSchema(opts); 83 | const renderBlock = makeRenderers(opts); 84 | 85 | function getPosition(editor) { 86 | if (!TablePosition.isInCell(editor.value, editor.value.startBlock, opts)) { 87 | return null; 88 | } 89 | return TablePosition.create(editor.value, editor.value.startBlock, opts); 90 | } 91 | 92 | return { 93 | onKeyDown, 94 | 95 | schema, 96 | normalizeNode, 97 | renderBlock, 98 | 99 | queries: { 100 | isSelectionInTable, 101 | getTablePosition: getPosition, 102 | }, 103 | 104 | commands: { 105 | insertTable: insertTable.bind(null, opts), 106 | insertTableByKey: insertTableByKey.bind(null, opts), 107 | insertTableByPath: insertTableByPath.bind(null, opts), 108 | insertRow: bindEditor(insertRow), 109 | removeRow: bindEditor(removeRow), 110 | insertColumn: bindEditor(insertColumn), 111 | removeColumn: bindEditor(removeColumn), 112 | removeTable: bindEditor(removeTable), 113 | moveTableSelection: bindEditor(moveTableSelection), 114 | moveTableSelectionBy: bindEditor(moveTableSelectionBy), 115 | toggleTableHeaders: bindEditor(toggleTableHeaders), 116 | } 117 | }; 118 | } 119 | 120 | // attach top-level function to create serializer rules 121 | EditTable.makeSerializerRules = makeSerializerRules 122 | 123 | module.exports = EditTable; -------------------------------------------------------------------------------- /lib/makeSchema.js: -------------------------------------------------------------------------------- 1 | const Slate = require('slate'); 2 | // const { SchemaViolations } = Slate; 3 | const { Range, List } = require('immutable'); 4 | const createCell = require('./createCell'); 5 | const createRow = require('./createRow'); 6 | 7 | const SchemaViolations = { 8 | ChildRequired: 'child_min_invalid', 9 | ChildObjectInvalid: 'child_object_invalid', 10 | ChildTypeInvalid: 'child_type_invalid', 11 | ParentTypeInvalid: 'parent_type_invalid', 12 | } 13 | 14 | /** 15 | * convenience methods used below 16 | */ 17 | 18 | const insertChild = (editor, error, type) => { 19 | return editor.insertNodeByKey( 20 | error.node.key, 21 | error.index, 22 | { object: 'block', type } 23 | ); 24 | }; 25 | 26 | const removeChild = (editor, error) => { 27 | return editor.removeNodeByKey(error.child.key); 28 | }; 29 | 30 | const wrapWithParent = (editor, error, type) => { 31 | return editor.wrapBlockByKey( 32 | error.node.key, 33 | type 34 | ); 35 | }; 36 | 37 | 38 | /** 39 | * Create a schema for tables 40 | * @param {String} opts.typeTable The type of table blocks 41 | * @param {String} opts.typeRow The type of row blocks 42 | * @param {String} opts.typeCell The type of cell blocks 43 | * @param {String} opts.typeContent The default type of content blocks in cells 44 | * @return {Object} A schema definition with rules to normalize tables 45 | */ 46 | function makeSchema(opts) { 47 | const schema = { 48 | blocks: { 49 | [opts.typeCell]: { 50 | parent: { type: opts.typeRow /* object: block in here stops it invalidating them, why? maybe the rules are OR */}, 51 | nodes: [{ 52 | match: { object: 'block' }, 53 | min: 1 54 | }], 55 | normalize: (editor, error) => { // reason, ctx 56 | 57 | // enforce cells must contain blocks, insert or wrap if not 58 | switch (error.code) { 59 | case SchemaViolations.ChildRequired: 60 | return editor.command(insertChild, error, opts.typeContent); 61 | 62 | case SchemaViolations.ChildObjectInvalid: 63 | // wrap non-block children with a block 64 | return editor.replaceNodeByKey( 65 | error.child.key, 66 | { 67 | object: 'block', 68 | type: opts.typeContent, 69 | nodes: error.node.mapDescendants(n => n.regenerateKey()).nodes 70 | } 71 | ); 72 | 73 | case SchemaViolations.ParentTypeInvalid: 74 | return editor.command(wrapWithParent, error, opts.typeRow); 75 | } 76 | } 77 | }, 78 | [opts.typeRow]: { 79 | parent: { type: opts.typeTable }, 80 | nodes: [{ 81 | match: {object: 'block', type: opts.typeCell}, 82 | min: 1 83 | }], 84 | normalize: (editor, error) => { 85 | 86 | // enforce rows must contain cells, drop all else 87 | switch (error.code) { 88 | case SchemaViolations.ChildRequired: 89 | return editor.command(insertChild, error, opts.typeCell); 90 | 91 | case SchemaViolations.ChildObjectInvalid: 92 | return editor.replaceNodeByKey( 93 | error.child.key, 94 | {object: 'block', type: opts.typeCell} 95 | ); 96 | 97 | case SchemaViolations.ChildTypeInvalid: 98 | // i wonder why we remove it instead of converting it to a cell. 99 | return editor.command(removeChild, error); 100 | 101 | case SchemaViolations.ParentTypeInvalid: 102 | return editor.command(wrapWithParent, error, opts.typeTable); 103 | } 104 | } 105 | }, 106 | [opts.typeTable]: { 107 | nodes: [{ 108 | match: {object: 'block', type: opts.typeRow}, 109 | min: 1 110 | }], 111 | normalize: (editor, error) => { 112 | 113 | // enforce rows must contain cells, drop all else 114 | switch (error.code) { 115 | case SchemaViolations.ChildRequired: 116 | return editor.command(insertChild, error, opts.typeRow); 117 | 118 | case SchemaViolations.ChildObjectInvalid: 119 | return editor.command(removeChild, error) 120 | .command(insertChild, error, opts.typeRow); 121 | 122 | case SchemaViolations.ChildTypeInvalid: 123 | return editor.command(removeChild, error); 124 | } 125 | } 126 | } 127 | } 128 | } 129 | 130 | const isRow = (node) => node.type === opts.typeRow; 131 | const isCell = (node) => node.type === opts.typeCell; 132 | const countCells = (row) => row.nodes.count(isCell); 133 | 134 | const normalizeNode = (node, editor, next) => { 135 | 136 | if (node.object != 'block') return next(); 137 | if (node.type !== opts.typeTable) return next(); 138 | 139 | const table = node; 140 | const rows = table.nodes.filter(isRow); 141 | 142 | // The number of column this table has 143 | const columns = rows.reduce((count, row) => { 144 | return Math.max(count, countCells(row)); 145 | }, 1); // Min 1 column 146 | 147 | const invalidRows = rows 148 | .map(row => { 149 | const cells = countCells(row); 150 | const invalids = row.nodes.filterNot(isCell); 151 | 152 | // Row is valid: right count of cells and no extra node 153 | if (invalids.isEmpty() && cells === columns) { 154 | return null; 155 | } 156 | 157 | // Otherwise, remove the invalids and append the missing cells 158 | return { 159 | row, 160 | invalids, 161 | add: (columns - cells) 162 | }; 163 | }) 164 | .filter(Boolean); 165 | 166 | if (invalidRows.size === 0) return next(); 167 | 168 | return (editor) => invalidRows.reduce((tr, { row, invalids, add }) => { 169 | 170 | tr = invalids.reduce((t, child) => { 171 | return t.removeNodeByKey(child.key); 172 | }, tr); 173 | 174 | tr = Range(0, add).reduce(t => { 175 | const cell = createCell(opts); 176 | return t.insertNodeByKey(row.key, 0, cell); 177 | }, tr); 178 | 179 | return tr; 180 | }, editor); 181 | } 182 | 183 | return { schema, normalizeNode }; 184 | } 185 | 186 | module.exports = makeSchema; 187 | -------------------------------------------------------------------------------- /lib/onTab.js: -------------------------------------------------------------------------------- 1 | const TablePosition = require('./TablePosition'); 2 | const moveSelectionBy = require('./changes/moveSelectionBy'); 3 | const insertRow = require('./changes/insertRow'); 4 | 5 | /** 6 | * Select all text of current block. 7 | * @param {Slate.Editor} editor 8 | * @return {Slate.Editor} 9 | */ 10 | function selectAllText(editor) { 11 | const { value } = editor; 12 | const { startBlock } = value; 13 | 14 | return editor.moveToRangeOfNode(startBlock); 15 | } 16 | 17 | /** 18 | * Pressing "Tab" moves the cursor to the next cell 19 | * and select the whole text 20 | */ 21 | function onTab(event, editor, opts) { 22 | const { value } = editor; 23 | event.preventDefault(); 24 | const direction = (event.shiftKey ? -1 : +1); 25 | 26 | // Create new row if needed 27 | const { startBlock } = value; 28 | const pos = TablePosition.create(value, startBlock, opts); 29 | 30 | if (pos.isFirstCell() && direction === -1) { 31 | editor = insertRow(opts, editor, 0); 32 | } else if (pos.isLastCell() && direction === 1) { 33 | editor = insertRow(opts, editor); 34 | } 35 | 36 | // Move 37 | editor = moveSelectionBy(opts, editor, direction, 0); 38 | 39 | // Select all cell. 40 | return selectAllText(editor); 41 | } 42 | 43 | module.exports = onTab; 44 | -------------------------------------------------------------------------------- /lib/onUpDown.js: -------------------------------------------------------------------------------- 1 | const TablePosition = require('./TablePosition'); 2 | const moveSelectionBy = require('./changes/moveSelectionBy'); 3 | 4 | function onUpDown(event, editor, opts) { 5 | const { value } = editor; 6 | const direction = event.key === 'ArrowUp' ? -1 : +1; 7 | const { startBlock } = value; 8 | const pos = TablePosition.create(value, startBlock, opts); 9 | 10 | if ((pos.isFirstRow() && direction === -1) 11 | || (pos.isLastRow() && direction === +1)) { 12 | // Let the default behavior move out of the table 13 | return editor; 14 | 15 | } else { 16 | event.preventDefault(); 17 | 18 | editor = moveSelectionBy( 19 | opts, editor, 20 | 0, event.key === 'ArrowUp' ? -1 : +1 21 | ); 22 | 23 | return editor; 24 | } 25 | } 26 | 27 | module.exports = onUpDown; 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slate-deep-table", 3 | "description": "A Slate plugin to handle tables containing complex content.", 4 | "version": "0.9.7", 5 | "license": "Apache-2.0", 6 | "repository": "git://github.com/jasonphillips/slate-deep-table.git", 7 | "main": "./dist/index.js", 8 | "dependencies": { 9 | "slate-html-serializer": "^0.8.0" 10 | }, 11 | "peerDependencies": { 12 | "react": ">=16.6.0", 13 | "react-dom": ">=16.6.0", 14 | "slate": "0.47.x", 15 | "immutable": ">=3.8.1" 16 | }, 17 | "devDependencies": { 18 | "babel-cli": "^6.11.4", 19 | "babel-core": "^6.11.4", 20 | "babel-plugin-transform-class-properties": "^6.24.1", 21 | "babel-preset-es2015": "^6.9.0", 22 | "babel-preset-react": "^6.11.1", 23 | "babelify": "^7.3.0", 24 | "browserify": "^16.3.0", 25 | "eslint": "^4.18.2", 26 | "eslint-config-gitbook": "1.4.0", 27 | "expect": "^1.20.2", 28 | "gh-pages": "^0.11.0", 29 | "http-server": "^0.11.1", 30 | "immutable": "^3.8.1", 31 | "jsdom": "^15.1.1", 32 | "mocha": "^6.1.4", 33 | "react": ">=16.6.0", 34 | "react-dom": ">=16.6.0", 35 | "slate": "^0.47.x", 36 | "slate-hyperscript": "^0.13.0", 37 | "slate-react": "^0.22.0", 38 | "watchify": "^3.11.1" 39 | }, 40 | "scripts": { 41 | "prepublish": "babel ./lib --out-dir ./dist", 42 | "postpublish": "npm run deploy-example", 43 | "lint": "eslint ./", 44 | "build-example": "browserify ./example/main.js -o ./example/bundle.js -t [ babelify --presets [ es2015 react ] --plugins transform-class-properties ] ", 45 | "watch-example": "watchify ./example/main.js -o ./example/bundle.js -t [ babelify --presets [ es2015 react ] --plugins transform-class-properties ] ", 46 | "serve-example": "http-server ./example/ -p 8080", 47 | "start": "npm run build-example; npm run serve-example", 48 | "deploy-example": "npm run build-example; gh-pages -d ./example", 49 | "test": "./node_modules/.bin/mocha ./tests/*.js --require babel-register --reporter=list" 50 | }, 51 | "keywords": [ 52 | "slate" 53 | ] 54 | } 55 | -------------------------------------------------------------------------------- /tests/all.js: -------------------------------------------------------------------------------- 1 | const expect = require('expect'); 2 | const fs = require('fs'); 3 | const path = require('path'); 4 | const Slate = require('slate'); 5 | const { Editor } = require('slate'); 6 | const DeepTable = require('../lib'); 7 | const makeSchema = require('../lib/makeSchema'); 8 | const Html = require('slate-html-serializer').default; 9 | const jsdom = require('jsdom'); 10 | 11 | // a basic table for serialize test, with no headers 12 | const basicTable = require('./basicTableInput').default; 13 | // with headers 14 | const headerTable = require('./headerTableInput').default; 15 | 16 | // a vanilla slate instance to normalize with 17 | const normalizeDefault = value => (new Slate.Editor({ value })).value 18 | 19 | // use the default serializers 20 | const html = new Html({ 21 | parseHtml: jsdom.JSDOM.fragment, 22 | rules: DeepTable.makeSerializerRules({}), 23 | }) 24 | 25 | describe('slate-deep-table', function() { 26 | const tests = fs.readdirSync(__dirname); 27 | const plugin = DeepTable(); 28 | 29 | tests.forEach(function(test) { 30 | if (test[0] === '.' || path.extname(test).length > 0) return; 31 | 32 | it(test, function() { 33 | const dir = path.resolve(__dirname, test); 34 | const input = require(path.resolve(dir, 'input.js')).default; 35 | const expected = require(path.resolve(dir, 'expected.js')).default; 36 | const runTransform = require(path.resolve(dir, 'transform.js')); 37 | 38 | // create editor instance to normalize input 39 | const editor = new Slate.Editor({ value: input, plugins: [plugin] }) 40 | 41 | // normalize expected as well, but with bare slate Editor 42 | const normalizedExpected = normalizeDefault(expected) 43 | 44 | const actual = runTransform(editor); 45 | //console.error(serialize(actual)) 46 | 47 | expect(actual.toJSON()).toEqual(normalizedExpected.toJSON()); 48 | }); 49 | }); 50 | 51 | it('can serialize with tbody, thead', function () { 52 | const serialized = html.serialize(headerTable); 53 | expect(serialized).toEqual( 54 | `|
58 | Col 0, Row 0 59 | |
60 |
61 | Col 1, Row 0 62 | |
63 |
|
68 | Col 0, Row 1 69 | |
70 |
71 | Col 1, Row 1 72 | |
73 |
|
76 | Col 0, Row 2 77 | |
78 |
79 | Col 1, Row 2 80 | |
81 |
|
94 | Col 0, Row 0 95 | |
96 |
97 | Col 1, Row 0 98 | |
99 |
|
102 | Col 0, Row 1 103 | |
104 |
105 | Col 1, Row 1 106 | |
107 |
|
110 | Col 0, Row 2 111 | |
112 |
113 | Col 1, Row 2 114 | |
115 |
An extraneous paragraph
119 | ` 120 | .split('\n').map(line => line.trim()).join('')) 121 | }) 122 | 123 | it('can deserialize an html table', function () { 124 | const htmlTable = ` 125 ||
128 | Col 0, Row 0 129 | |
130 |
131 | Col 1, Row 0 132 | |
133 |
|
136 | Col 0, Row 1 137 | |
138 |
139 | Col 1, Row 1 140 | |
141 |
|
144 | Col 0, Row 2 145 | |
146 |
147 | Col 1, Row 2 148 | |
149 |
An extraneous paragraph
152 | `.split('\n').map(line => line.trim()).join(''); 153 | 154 | const deserialized = html.deserialize(htmlTable); 155 | const value = new Slate.Editor({ value: deserialized, plugins: [plugin] }).value 156 | 157 | expect(value.toJSON()).toEqual(basicTable.toJSON()); 158 | }) 159 | 160 | it('can deserialize an html table with headers', function () { 161 | const htmlTable = ` 162 ||
166 | Col 0, Row 0 167 | |
168 |
169 | Col 1, Row 0 170 | |
171 |
|
176 | Col 0, Row 1 177 | |
178 |
179 | Col 1, Row 1 180 | |
181 |
|
184 | Col 0, Row 2 185 | |
186 |
187 | Col 1, Row 2 188 | |
189 |
|
11 | Row 1, Col 1 12 | |
13 | 14 | 15 | | 16 |
17 | Row 1, Col 3 18 | |
19 |
| Row 1, Col 1 | 11 |Row 1, Col 2 | 12 |Row 1, Col 3 | 13 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
|
19 | Col 0, Row 1 20 | |
21 |
22 | Col 1, Row 1 23 | |
24 |
|
27 | Col 0, Row 2 28 | |
29 |
30 | Col 1, Row 2 31 | |
32 |
An extraneous paragraph
35 ||
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
|
19 | Col 0, Row 1 20 | |
21 |
22 | Col 1, Row 1 23 | |
24 |
|
27 | Col 0, Row 2 28 | |
29 |
30 | Col 1, Row 2 31 | |
32 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | |
16 |
17 | Col 1, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | |
27 |
28 | Col 1, Row 1 29 | |
30 |
|
33 | Col 0, Row 2 34 | |
35 |
36 | |
38 |
39 | Col 1, Row 2 40 | |
41 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
|
19 | Col 0, Row 1 20 | |
21 |
22 | Col 1, Row 1 23 | |
24 |
|
27 | Col 0, Row 2 28 | |
29 |
30 | Col 1, Row 2 31 | |
32 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | |
30 |
|
33 | Col 0, Row 2 34 | |
35 |
36 | Col 1, Row 2 37 | |
38 |
39 | |
41 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
|
19 | Col 0, Row 1 20 | |
21 |
22 | Col 1, Row 1 23 | |
24 |
|
27 | Col 0, Row 2 28 | |
29 |
30 | Col 1, Row 2 31 | |
32 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
|
33 | |
35 |
36 | |
38 |
39 | |
41 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
9 |
|
12 | |
14 |
15 | |
17 |
|
20 | |
22 |
23 | |
25 |
9 |
|
12 | |
14 |
15 | |
17 |
|
20 | |
22 |
23 | |
25 |
Before
9 ||
12 | |
14 |
15 | |
17 |
|
20 | |
22 |
23 | |
25 |
BeforeAfter
9 ||
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
|
33 | Col 0, Row 2 34 | |
35 |
36 | Col 1, Row 2 37 | |
38 |
39 | Col 2, Row 2 40 | |
41 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
|
33 | Col 0, Row 2 34 | |
35 |
36 | Col 1, Row 2 37 | |
38 |
39 | Col 2, Row 2 40 | |
41 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
|
33 | Col 0, Row 2 34 | |
35 |
36 | Col 1, Row 2 37 | |
38 |
39 | Col 2, Row 2 40 | |
41 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
|
33 | Col 0, Row 2 34 | |
35 |
36 | Col 1, Row 2 37 | |
38 |
39 | Col 2, Row 2 40 | |
41 |
A paragraph not in a table
9 ||
12 | A paragraph within a table 13 | |
14 |
A paragraph not in a table
9 ||
12 | A paragraph within a table 13 | |
14 |
|
11 | Col 1, Row 0 12 | |
13 |
14 | Col 2, Row 0 15 | |
16 |
|
19 | Col 1, Row 1 20 | |
21 |
22 | Col 2, Row 1 23 | |
24 |
|
27 | Col 1, Row 2 28 | |
29 |
30 | Col 2, Row 2 31 | |
32 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
|
33 | Col 0, Row 2 34 | |
35 |
36 | Col 1, Row 2 37 | |
38 |
39 | Col 2, Row 2 40 | |
41 |
|
11 | |
13 |
|
16 | |
18 |
|
21 | |
23 |
|
11 | Col 0, Row 0 12 | |
13 |
|
16 | Col 0, Row 1 17 | |
18 |
|
21 | Col 0, Row 2 22 | |
23 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 2, Row 0 15 | |
16 |
|
19 | Col 0, Row 1 20 | |
21 |
22 | Col 2, Row 1 23 | |
24 |
|
27 | Col 0, Row 2 28 | |
29 |
30 | Col 2, Row 2 31 | |
32 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
|
33 | Col 0, Row 2 34 | |
35 |
36 | Col 1, Row 2 37 | |
38 |
39 | Col 2, Row 2 40 | |
41 |
|
11 | Col 0, Row 1 12 | |
13 |
14 | Col 1, Row 1 15 | |
16 |
17 | Col 2, Row 1 18 | |
19 |
|
22 | Col 0, Row 2 23 | |
24 |
25 | Col 1, Row 2 26 | |
27 |
28 | Col 2, Row 2 29 | |
30 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
|
33 | Col 0, Row 2 34 | |
35 |
36 | Col 1, Row 2 37 | |
38 |
39 | Col 2, Row 2 40 | |
41 |
|
11 | |
13 |
14 | |
16 |
17 | |
19 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 2 23 | |
24 |
25 | Col 1, Row 2 26 | |
27 |
28 | Col 2, Row 2 29 | |
30 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
|
33 | Col 0, Row 2 34 | |
35 |
36 | Col 1, Row 2 37 | |
38 |
39 | Col 2, Row 2 40 | |
41 |
Before
9 |After
10 |Before
9 ||
12 | Col 0, Row 0 13 | |
14 |
15 | Col 1, Row 0 16 | |
17 |
18 | Col 2, Row 0 19 | |
20 |
|
23 | Col 0, Row 1 24 | |
25 |
26 | Col 1, Row 1 27 | |
28 |
29 | Col 2, Row 1 30 | |
31 |
|
34 | Col 0, Row 2 35 | |
36 |
37 | Col 1, Row 2 38 | |
39 |
40 | Col 2, Row 2 41 | |
42 |
After
45 ||
11 | Row 1, Col 1 12 | |
13 |
14 | Row 1, Col 2 15 | |
16 |
17 | Row 1, Col 3 18 | |
19 |
|
11 | Row 1, Col 1 12 | |
13 |
14 | Row 1, Col 2 15 | |
16 |
17 | Row 1, Col 3 18 | |
19 |
|
11 | Row 1, Col 1 12 | |
13 |
14 | Row 1, Col 2 15 | |
16 |
17 | Row 1, Col 3 18 | |
19 |
|
11 | Row 1, Col 1 12 | |
13 |
14 | Row 1, Col 2 15 | |
16 |
17 | Row 1, Col 3 18 | |
19 |
|
11 | No table 12 | |
13 |
|
18 | No rows 19 | |
20 |
|
11 | Col 1, Row 1 12 | |
13 |
14 | Col 2, Row 1 15 | |
16 |
17 | Col 3, Row 1 18 | |
19 |
|
22 | |
24 |
25 | |
27 |
28 | There is only one column here 29 | |
30 |
|
33 | |
35 |
36 | Col 1, Row 3 37 | |
38 |
39 | Col 3, Row 3 40 | |
41 |
|
11 | Col 1, Row 1 12 | |
13 |
14 | Col 2, Row 1 15 | |
16 |
17 | Col 3, Row 1 18 | |
19 |
| There is only one column here | 22 |||
|
25 | Col 1, Row 3 26 | |
27 |
31 | Col 3, Row 3 32 | |
33 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
|
33 | Col 0, Row 2 34 | |
35 |
36 | Col 1, Row 2 37 | |
38 |
39 | Col 2, Row 2 40 | |
41 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
|
33 | Col 0, Row 2 34 | |
35 |
36 | Col 1, Row 2 37 | |
38 |
39 | Col 2, Row 2 40 | |
41 |
|
11 | |
13 |
|
18 | Row 1, Col 1 19 | |
20 |
|
23 | Row 3, Col 1 24 | |
25 |
|
12 | Row 1, Col 1 13 | |
14 |
17 | Row 2, Col 1 18 | |
19 |
|
22 | Row 3, Col 1 23 | |
24 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
|
19 | Col 0, Row 1 20 | |
21 |
22 | Col 1, Row 1 23 | |
24 |
|
27 | Col 0, Row 2 28 | |
29 |
30 | Col 1, Row 2 31 | |
32 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
|
19 | Col 0, Row 1 20 | |
21 |
22 | |
24 |
|
27 | Col 0, Row 2 28 | |
29 |
30 | Col 1, Row 2 31 | |
32 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
BeforeAfter
9 |BeforeAfter
9 ||
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
|
33 | Col 0, Row 2 34 | |
35 |
36 | Col 1, Row 2 37 | |
38 |
39 | Col 2, Row 2 40 | |
41 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
|
33 | Col 0, Row 2 34 | |
35 |
36 | Col 1, Row 2 37 | |
38 |
39 | Col 2, Row 2 40 | |
41 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
|
33 | Col 0, Row 2 34 | |
35 |
36 | Col 1, Row 2 37 | |
38 |
39 | Col 2, Row 2 40 | |
41 |
|
11 | Col 0, Row 0 12 | |
13 |
14 | Col 1, Row 0 15 | |
16 |
17 | Col 2, Row 0 18 | |
19 |
|
22 | Col 0, Row 1 23 | |
24 |
25 | Col 1, Row 1 26 | |
27 |
28 | Col 2, Row 1 29 | |
30 |
|
33 | Col 0, Row 2 34 | |
35 |
36 | Col 1, Row 2 37 | |
38 |
39 | Col 2, Row 2 40 | |
41 |
Before
9 ||
12 | Col 0, Row 0 13 | |
14 |
15 | Col 1, Row 0 16 | |
17 |
18 | Col 2, Row 0 19 | |
20 |
|
23 | Col 0, Row 1 24 | |
25 |
26 | Col 1, Row 1 27 | |
28 |
29 | Col 2, Row 1 30 | |
31 |
|
34 | Col 0, Row 2 35 | |
36 |
37 | Col 1, Row 2 38 | |
39 |
40 | Col 2, Row 2 41 | |
42 |
After
45 |Before
9 ||
12 | Col 0, Row 0 13 | |
14 |
15 | Col 1, Row 0 16 | |
17 |
18 | Col 2, Row 0 19 | |
20 |
|
23 | Col 0, Row 1 24 | |
25 |
26 | Col 1, Row 1 27 | |
28 |
29 | Col 2, Row 1 30 | |
31 |
|
34 | Col 0, Row 2 35 | |
36 |
37 | Col 1, Row 2 38 | |
39 |
40 | Col 2, Row 2 41 | |
42 |
After
45 |