Skip to content

A Summernote plugin that adds a button to the table popover allowing the user to toggle the first row as a table header.

License

Notifications You must be signed in to change notification settings

flaushi/summernote-table-headers

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 

Repository files navigation

summernote-table-headers

A Summernote plugin that adds a button to the table popover allowing the user to toggle the first row as a table header.

How it works

The plugin creates a <thead> element at the top of the table, and moves the top <tr> into the header. It then swaps each of the <td> cells for <th> header cells. Toggle the header off reversese this.

When the summernote table popover is used to create a new column, summernote creates <td> cells within the header. The pluging detects these changes to the table and converts them to propper <th> header cells.

Usage

  1. Include summernote-table-headers.js
  2. Customize the Summernote table popover to include tableHeaders
$(document).ready(function() {
  $('#summernote').summernote({
    popover: {
      table: [
        ['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
        ['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
        ['custom', ['tableHeaders']]
      ],
    },
  });
});

Working Example

https://rawgit.com/tylerecouture/summernote-table-headers/master/Example/example.html

To do

  • Add vertical headers

About

A Summernote plugin that adds a button to the table popover allowing the user to toggle the first row as a table header.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 64.9%
  • HTML 35.1%