Browse Prior Art Database

A system and method to display wide table on mobile screens Disclosure Number: IPCOM000238183D
Publication Date: 2014-Aug-07
Document File: 7 page(s) / 98K

Publishing Venue

The Prior Art Database


This disclosure describes a new way of displaying grid widget on mobile platform, especially on phone platform. As grid is a complex widget which always lots of columns and plenty of row data, so in a limited screen, we are always facing an issue of display it and interact with it. In order to give our end user a better user experience, we make a reconcilable UI for grid in mobile, which can display it in a better style(sidebar mode), and can also give user a better interaction(quickly and smoothly)

This text was extracted from a PDF file.
This is the abbreviated version, containing approximately 52% of the total text.

Page 01 of 7

A system and method to display wide table on mobile screens

Nowadays, more and more applications can be accessed through mobile device like native app, hybrid app, webpages, etc. Table is a common and powerful data viewer and it's widely used in all kinds of applications to show huge amount of structuring data. Since the limited viewport of mobile devices like mobile phone, tables with large amount of data are hard to show on those devices, especially for tables with many columns. Because of this drawback of table under mobile devices, we tend to show data with very little amount of columns iin table on mobile device although most of the time we don't want to do so. That's very unfriendly to users because they want better experience to view data inside a table on mobile devices.

[Field of this invention]

Computer, Mobile Phone, etc

[Problem, known solution, related ART, drawbacks]

There are some methods to show wide tables like horizontal scrollbar, pagination, etc. However, those methods are not powerful enough because it is hard for users to be aware of how many columns are there in the current table exactly. Meanwhile, users will suffer from navigate to or go back to a specific column accurately when the column they want to navigate to is out of the current viewport. They will keep scrolling back and forth multiple times to go to a specific column.

This disclosure provides a new way to display wide table component in the limited screen size, especially in mobile platforms. It describes how to show the headers and body content of a complex grid(which has more than 10 columns) in different devices; It takes full advantage of the limited screen and displays the most important information of one grid under several display tactics .

The main point of this disclosure includes:
1. The grid headers are displayed in the sidebar mode.

- Initially the un-displayed column header is filled in as the right side bar vertically .

- When the user scrolls to right to see the un-displayed grid content, the header will be filled in as left side bar vertically.

- When the user scrolls back to left to see the previous grid content, the header will fill in as the right side bar vertically .
2. The user can touch the side bar headers to navigate to the corresponding content.

This new methodology have following advantages:
1. The user is clear about which part of the grid they are looking at, and i...