{"id":126,"date":"2023-08-25T17:32:48","date_gmt":"2023-08-25T17:32:48","guid":{"rendered":"\/\/api.jquerymobile.com\/1.3\/?p=126"},"modified":"2023-08-25T17:32:48","modified_gmt":"2023-08-25T17:32:48","slug":"table","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.3\/table\/","title":{"rendered":"Table Widget"},"content":{"rendered":"

\nTable Widget<\/span>version added: 1.3<\/span>\n<\/h2>\n
\n

Description: <\/strong>Creates a responsive table<\/p>\n

QuickNavExamples<\/a>\n<\/h2><\/header>
\n

Options<\/h3>\n
classes.table<\/a><\/div>\n
initSelector<\/a><\/div>\n<\/div>\n

Methods<\/h3><\/div>\n
\n

Events<\/h3>\n
create<\/a><\/div>\n<\/div><\/section>
\n\t\t

Responsive tables<\/h2>\n\t\t

One of the biggest challenges in responsive web design (RWD) is presenting tabular data. Large tables with lots of columns don't fit on smaller screens and there isn't a simple way to re-format the table content with CSS and media queries for an acceptable presentation. To address this, the framework offers two different options for presenting tables responsively. Each has benefits and tradeoffs, the right choice will depend on the data being presented.<\/p>\n\n\t\t

Reflow mode<\/a> - Re-formats the table columns at narrow widths so each row of data is presented as a formatted block of label\/data pairs. This is ideal for tables with product or contact information with more complex or lengthy data formatting that doesn't need comparison across rows of data.<\/p>\n\n\t\t

Column toggle mode<\/a> - Selectively hides columns at narrower widths as a sensible default but also offers a menu to let users manually control which columns they want to see. This mode is better for financial data tables that have compact values and need to maintain comparisons across columns and rows of data. It can also be used for building things like product comparison tables.<\/p>\n\n\t\t

The responsive table feature is built with a core table plugin (table.js<\/code>) that initializes when the data-role="table"<\/code> attribute is added to the markup. This plugin is very lightweight and adds ui-table<\/code> class, parses the table headers and generates information on the columns of data, and fires a tablecreate<\/code> event. Both the table modes, reflow<\/a> and column toggle<\/a>, are written as extensions to the table widget that hook in via the create<\/code> event to add the additional behaviors that make the tables responsive. Reflow is the default mode so if the extension is present, it will be applied automatically if the data-role="table"<\/code> attribute is on the table.<\/p>\n\t\t

If only one mode is used on a project, the download builder tool can be used to package only the table plugin and the single extension to save code weight.<\/p>\n\n\t\t

General table markup guidelines<\/h3>\n\n\t\t

Here is the basic table markup you should use for both table modes:<\/p>\n\n

\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
20<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
<table<\/span> data-role<\/span>="table"<\/span> id<\/span>="my-table"<\/span> data-mode<\/span>="reflow"<\/span>><\/span><\/code><\/div><\/div>
  <thead<\/span>><\/span><\/code><\/div><\/div>
    <tr<\/span>><\/span><\/code><\/div><\/div>
      <th<\/span>><\/span>Rank<\/th<\/span>><\/span><\/code><\/div><\/div>
      <th<\/span>><\/span>Movie Title<\/th<\/span>><\/span><\/code><\/div><\/div>
      <th<\/span>><\/span>Year<\/th<\/span>><\/span><\/code><\/div><\/div>
      <th<\/span>><\/span><abbr<\/span> title<\/span>="Rotten Tomato Rating"<\/span>><\/span>Rating<\/abbr<\/span>><\/span><\/th<\/span>><\/span><\/code><\/div><\/div>
      <th<\/span>><\/span>Reviews<\/th<\/span>><\/span><\/code><\/div><\/div>
    <\/tr<\/span>><\/span><\/code><\/div><\/div>
  <\/thead<\/span>><\/span><\/code><\/div><\/div>
  <tbody<\/span>><\/span><\/code><\/div><\/div>
    <tr<\/span>><\/span><\/code><\/div><\/div>
      <th<\/span>><\/span>1<\/th<\/span>><\/span><\/code><\/div><\/div>
      <td<\/span>><\/span><a<\/span> href<\/span>="foo.com"<\/span> data-rel<\/span>="external"<\/span>><\/span>Citizen Kane<\/a<\/span>><\/span><\/td<\/span>><\/span><\/code><\/div><\/div>
      <td<\/span>><\/span>1941<\/td<\/span>><\/span><\/code><\/div><\/div>
      <td<\/span>><\/span>100%<\/td<\/span>><\/span><\/code><\/div><\/div>
      <td<\/span>><\/span>74<\/td<\/span>><\/span><\/code><\/div><\/div>
    <\/tr<\/span>><\/span><\/code><\/div><\/div>
    <\/tbody<\/span>><\/span><\/code><\/div><\/div>
<\/table<\/span>><\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t
Both table modes start with standard HTML table markup but there are some specific guidelines you must follow for the responsive table to work correctly:  <\/p>\n\t\t