From 5b5b25dd16bc02b2002b6f6a77aa7c48c63bf91a Mon Sep 17 00:00:00 2001 From: Marxsal Date: Fri, 30 Dec 2016 09:45:44 -0800 Subject: [PATCH] Docs: Add how-tos on putting list into table format (#2672) * Document method(s) to format the output of a list in tabular format. * Added 2nd CSS method for formatting as Table * Three methods of putting lists into table form. * Removed "probably" comment --- ...s with CSS - Specified Columns Methods.tid | 57 +++++++++++++ ...bles with CSS - Variable Column Method.tid | 84 +++++++++++++++++++ ...atting_List_Results_as_Tables_(no_CSS).tid | 50 +++++++++++ 3 files changed, 191 insertions(+) create mode 100644 editions/tw5.com/tiddlers/howtos/Formatting List Results as Tables with CSS - Specified Columns Methods.tid create mode 100644 editions/tw5.com/tiddlers/howtos/Formatting List Results as Tables with CSS - Variable Column Method.tid create mode 100644 editions/tw5.com/tiddlers/howtos/Formatting_List_Results_as_Tables_(no_CSS).tid diff --git a/editions/tw5.com/tiddlers/howtos/Formatting List Results as Tables with CSS - Specified Columns Methods.tid b/editions/tw5.com/tiddlers/howtos/Formatting List Results as Tables with CSS - Specified Columns Methods.tid new file mode 100644 index 000000000..bae7414ca --- /dev/null +++ b/editions/tw5.com/tiddlers/howtos/Formatting List Results as Tables with CSS - Specified Columns Methods.tid @@ -0,0 +1,57 @@ +created: 20161209172820513 +modified: 20161220161653258 +tags: Learning +title: Formatting List Results as Tables with CSS - Specified Columns Methods +type: text/vnd.tiddlywiki + +Sometimes you want the results of a ``<$list>`` widget to be formatted in the form of multiple columns, instead of just one straight listing. This method uses ~CSS to set up listing as columns and assumes that you know how many columns you want. The method here is to create a style that reflects the number of columns you want your table to be in, and then apply that style to the resulting list output. + +For other table-making techniques see also: + +* [[Formatting List Results as Tables with CSS - Variable Column Method]] +* [[Formatting List Results as Tables (no CSS)]] + + +!!! 1) Create a tiddler for the columns tagged with `$:/tags/Stylesheet`, containing: + +``` +/* FOUR COLUMN MODE */ +.fourcolumns { + display:block; + -moz-column-count:4; + -moz-column-gap:1em; + -webkit-column-count: 4; + -webkit-column-gap:1em; +} +``` + +Note the various places you need to indicate the number of columns + +!!! 2) Then format your output like this: + +``` +@@.fourcolumns +<$list filter="[tag[Filter Operators]]" variable="foo">
+<> + +@@ +``` + +!! Example showing partial list of filter operators + + + + +@@.fourcolumns +<$list filter="[tag[Filter Operators]limit[24]]" variable="foo">
+<> + +@@ diff --git a/editions/tw5.com/tiddlers/howtos/Formatting List Results as Tables with CSS - Variable Column Method.tid b/editions/tw5.com/tiddlers/howtos/Formatting List Results as Tables with CSS - Variable Column Method.tid new file mode 100644 index 000000000..b5aa12c1b --- /dev/null +++ b/editions/tw5.com/tiddlers/howtos/Formatting List Results as Tables with CSS - Variable Column Method.tid @@ -0,0 +1,84 @@ +created: 20161209172820513 +modified: 20161220162845058 +tags: Learning +title: Formatting List Results as Tables with CSS - Variable Column Method +type: text/vnd.tiddlywiki + +Sometimes you want the results of a ``<$list>`` widget to be formatted in the form of multiple columns, instead of just one straight listing. This method uses CSS to set up listing as columns. It is responsive, that is, re-positioning to display fewer columns if the window is too small. + +You don't directly specify a fixed number of columns but instead specify the max-width for the list (which could be a transclusion of the tiddler width) and the width for each item. It lists from left to right, then wraps to a new row. + +For other table-making techniques see also: + +* [[Formatting List Results as Tables with CSS - Specified Columns Methods]] +* [[Formatting List Results as Tables (no CSS)]] + + +!! Example listing using 50 existing ~TiddlyWiki tags + +``` +
+ <$list filter="[has[tags]tags[]sort[title]first[50]]"> + + <$transclude tiddler="$:/core/ui/TagTemplate"/> + + +
+``` + +!! Example stylesheet to use with listing + +``` + +``` + +!! Results + +
+ <$list filter="[has[tags]tags[]sort[title]first[50]]"> + + <$transclude tiddler="$:/core/ui/TagTemplate"/> + + +
+ + + diff --git a/editions/tw5.com/tiddlers/howtos/Formatting_List_Results_as_Tables_(no_CSS).tid b/editions/tw5.com/tiddlers/howtos/Formatting_List_Results_as_Tables_(no_CSS).tid new file mode 100644 index 000000000..796901d63 --- /dev/null +++ b/editions/tw5.com/tiddlers/howtos/Formatting_List_Results_as_Tables_(no_CSS).tid @@ -0,0 +1,50 @@ +created: 20161220154952676 +modified: 20161220161706470 +tags: Learning +title: Formatting List Results as Tables (no CSS) +type: text/vnd.tiddlywiki + +Sometimes you want the results of a ``<$list>`` widget to be formatted in the form of multiple columns instead of just one straight listing. The following method creates an actual table structure and uses the [[nth operator|nth Operator]] to provide break points for the rows. It is not responsive, that is, it doesn't re-position to display fewer columns if the window is too small. + +In the first, outer list structure you must provide a count to indicate at item number rows should occur. So, in the following example, each row breaks after 4 items, so the sequence is 1,5,9, etc. Note that this requires you to know in advance the maximum number of items there will be. There is also an internal limit that is set to n-1 items, where n is the number of columns you want. + +Note also that you need to repeat the driving filter operator inside of the internal `<$list>` widget. Obviously this technique lends itself to a macro implementation. + +For other table-making techniques see also: + +* [[Formatting List Results as Tables with CSS - Variable Column Method]] +* [[Formatting List Results as Tables with CSS - Specified Columns Methods]] + + +!! Example code for a four-column table with fewer than 70 items + +``` + +<$list filter="1 5 9 13 17 21 25 29 33 37 41 45 49 53 57 61 65" variable ="rows"> + <$list filter="[tag[Filter Operators]limit[50]] +[nth]" variable="cell"> + + + <$list filter="[tag[Filter Operators]limit[50]] +[allafterlimit[3]]" variable="this"> + + + + + +
<> <>
+``` + +!! Result + + +<$list filter="1 5 9 13 17 21 25 29 33 37 41 45 49 53 57 61 65" variable ="rows"> + <$list filter="[tag[Filter Operators]limit[50]] +[nth]" variable="cell"> + + + <$list filter="[tag[Filter Operators]limit[50]] +[allafterlimit[3]]" variable="this"> + + + + + +
<> <>
+