Skip to:

  1. Skip to Jira Navigation
  2. Skip to Side Navigation
  3. Skip to Main Content

Pinned table columns

Description

For large tables, a user must be able to view some elements regardless of where they appear in the logical order of the table.

To solve this, a standard pattern is to "pin" a column — so that as the user scrolls horizontally the column(s) that are pinned seem to not move, but rather float over other elements. Unless someone wants to dig into the semantics of colgroup.

Since the semantics of generating a table focus on rows, and not columns, an "isPinned" class will need to be added to all table cells that should exhibit this behavior. The markup would look something like this:

<table> <tr> <th class="is-pinned">Name</th> <th>Field</th> <th>Another Field</th> </tr> <tr> <td class="is-pinned">Phone something</td> <td>Foo Bar</td> <td class="number">12</td> </tr> <tr> <td class="is-pinned">Cup blah blah</td> <td>Bar food</td> <td class="number">7</td> </tr> </table>

An ideal solution would only use CSS to pin the table cells — but if javascript is used, it should be applied as an attribute or css directive with the name "isPinned" (and should only work on `<td>` and `<th>`

Attachments

4
  • 17 Jan 2017, 01:06 PM
  • 17 Jan 2017, 01:02 PM
  • 17 Jan 2017, 08:23 AM
  • 17 Jan 2017, 08:22 AM

Confluence content

mentioned on

QAlity Plus - Test Management

Checklists

Activity

Anna Czyrko 
January 17, 2017 at 1:25 PM

Mateusz Kwiatkowski 
January 17, 2017 at 1:08 PM

For now pinned columns are described in template, but it cannot be changed in template configure screen, so answer is no.

Anna Czyrko 
January 17, 2017 at 1:06 PM

Chrome - All works:

Firefox - all works:

Question: Can I choose columns which should be pinned? For this moment three columns are pinned: Skip, Product Code, Products.

Mateusz Kwiatkowski 
January 17, 2017 at 8:23 AM
(edited)

I have found that when you scroll product grid using scroll wheel it works just fine

but when I try to use mouse pointer instead and scroll fast enough part of the columns are hiding (depending on how fast I scroll)

I will create a new ticket for it.

https://openlmis.atlassian.net/browse/OLMIS-1670

Mateusz Kwiatkowski 
January 12, 2017 at 3:16 PM

Yea your idea was great!!! It worked!! Thanks a lot!!

But still I have problems with borders. I will push changes to the branch soon and make review so you can view it.

Done
Pinned fields
Click on the next to a field label to start pinning.

Details

Assignee

Reporter

Story Points

Original estimate

Time tracking

2d 6h logged

Components

Sprint

Fix versions

Priority

Parent

Time Assistant

Created November 10, 2016 at 8:01 PM
Updated January 17, 2017 at 7:15 PM
Resolved January 17, 2017 at 1:19 PM