Responsive tables and adding "data-label" to cell data

  • Resolved ckrizman

    (@ckrizman)


    10 years, 4 months ago

    I have a site that uses a lot of tables. I tried the responsive extension you offered and while it is great, it really doesn’t translate our data well. I have found a responsive solution I like, but there is a portion of the code that relies on each cell having a “data-label” to define its content that corresponds to the header title of its column. How can I add a data label automatically to each cell that corresponds to the header title of its column? Right now cell content is just in a div. I figure this would be a code addition to the plugin that generates the table. Thanks

    http://wordpress.org/plugins/tablepress/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter ckrizman

    (@ckrizman)

    10 years, 4 months ago

    The ideal format then of the div that contains the data would be like the following:

    <div data-label=”Employee No”>Employee No</div>
    <div data-label=”User Name”>User Name</div>

    Plugin Author TobiasBg

    (@tobiasbg)

    10 years, 4 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    Unfortunately, this is very tricky to do at the moment 🙁 (That’s also the reason why there are no other Extensions for responsiveness yet…)
    Your best change should be to write some custom code that hooks into the tablepress_table_output filter hook (in class-render.php) and does some search/replace on the strings in the cells in the first row. Most likely, it won’t be enough to just modify the <div> elements though, as that data-label will probably have to be part of the <th> element in the header.

    The easier solution should however be to write some JavaScript code that adds those data-label attributes to each <th> in the table, with the cell content as the attribute value.

    Regards,
    Tobias

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Responsive tables and adding "data-label" to cell data’ is closed to new replies.