Button style/positioning

client/src/entrypoints/contrib/typed_table_block/typed_table_block.js

@@ -45,12 +45,16 @@ export class TypedTableBlock {
         <div data-deleted-fields></div>
         <table>
           <thead>
-            <tr><th><button type="button" data-append-column>Add columns</button></th></tr>
+            <tr><th>
+              <button type="button" class="button button-small button-secondary" data-append-column>
+                Add columns
+              </button>
+            </th></tr>
           </thead>
           <tbody>
           </tbody>
         </table>
-        <button type="button" data-add-row>Add row</button>
+        <button type="button" class="button button-small button-secondary" data-add-row>Add row</button>
       </div>
     `);
     $(placeholder).replaceWith(dom);
@@ -193,9 +197,11 @@ export class TypedTableBlock {
 
     column.headingInput = document.createElement('input');
     column.headingInput.name = this.prefix + '-column-' + column.id + '-heading';
+    column.headingInput.placeholder = 'Column heading';
     newHeaderCell.appendChild(column.headingInput);
 
-    const prependColumnButton = $('<button type="button" title="Insert column before this one">+</button>');
+    const prependColumnButton = $(`<button type="button"
+      class="button button-small button-secondary prepend-column" title="Insert column here">+</button>`);
     $(newHeaderCell).append(prependColumnButton);
     prependColumnButton.on('click', () => {
       this.toggleAddColumnMenu(prependColumnButton, (chosenBlockDef) => {
@@ -203,7 +209,8 @@ export class TypedTableBlock {
       });
     });
 
-    const deleteColumnButton = $('<button type="button" title="Delete column">x</button>');
+    const deleteColumnButton = $(`<button type="button"
+      class="button button-small button-secondary delete-column" title="Delete column">x</button>`);
     $(newHeaderCell).append(deleteColumnButton);
     deleteColumnButton.on('click', () => {
       this.deleteColumn(column.position);
@@ -294,13 +301,15 @@ export class TypedTableBlock {
     row.positionInput.value = row.position;
     controlCell.appendChild(row.positionInput);
 
-    const prependRowButton = $('<button type="button" title="Insert row above this one">+</button>');
+    const prependRowButton = $(`<button type="button"
+      class="button button-small button-secondary prepend-row" title="Insert row here">+</button>`);
     $(controlCell).append(prependRowButton);
     prependRowButton.on('click', () => {
       this.insertRow(row.position);
     });
 
-    const deleteRowButton = $('<button type="button" title="Delete row">x</button>');
+    const deleteRowButton = $(`<button type="button"
+      class="button button-small button-secondary" title="Delete row">x</button>`);
     $(controlCell).append(deleteRowButton);
     deleteRowButton.on('click', () => {
       this.deleteRow(row.position);

gulpfile.js/config.js

@@ -33,6 +33,7 @@ var apps = [
     new App(path.join('wagtail', 'contrib', 'styleguide'), {'appName': 'wagtailstyleguide'}),
     new App(path.join('wagtail', 'contrib', 'settings'), {'appName': 'wagtailsettings'}),
     new App(path.join('wagtail', 'contrib', 'modeladmin'), {'appName': 'wagtailmodeladmin'}),
+    new App(path.join('wagtail', 'contrib', 'typed_table_block'), {'appName': 'typed_table_block'}),
 ];
 
 module.exports = {

wagtail/contrib/typed_table_block/blocks.py

@@ -303,7 +303,11 @@ class TypedTableBlockAdapter(Adapter):
     def media(self):
         return forms.Media(js=[
             versioned_static('typed_table_block/js/typed_table_block.js'),
-        ])
+        ], css={
+            'all': [
+                versioned_static('typed_table_block/css/typed_table_block.css'),
+            ]
+        })
 
 
 register(TypedTableBlockAdapter(), TypedTableBlock)

wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss

@@ -0,0 +1,32 @@
+.typed-table-block {
+    table {
+        margin-top: 1.5em;
+        margin-left: 1.5em;
+    }
+
+    th {
+        position: relative;
+
+        button.prepend-column {
+            position: absolute;
+            left: -1.2em;
+            top: -2.2em;
+        }
+
+        button.delete-column {
+            position: absolute;
+            right: 8px;
+            top: 1em;
+        }
+    }
+
+    tbody tr {
+        position: relative;
+
+        button.prepend-row {
+            left: -2.5em;
+            position: absolute;
+            top: -1em;
+        }
+    }
+}