updated docs of format wrt colgroups

Author: Jolanrensen

docs/StardustDocs/resources/modify/operations/formatExample_properties.html

@@ -706,8 +706,8 @@
 call_DataFrame(function() { DataFrame.renderTable(3) });
 
 /*<!--*/
-call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\">firstName</span>", children: [], rightAlign: false, values: ["Alice","Bob","Charlie","Charlie","Bob","Alice","Charlie"] }, 
-{ name: "<span title=\"lastName: String\">lastName</span>", children: [], rightAlign: false, values: ["Cooper","Dylan","Daniels","Chaplin","Marley","Wolf","Byrd"] }, 
+call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\">firstName</span>", children: [], rightAlign: false, values: [{ style: "background-color:#98fb98", value: "Alice"},{ style: "background-color:#98fb98", value: "Bob"},{ style: "background-color:#98fb98", value: "Charlie"},{ style: "background-color:#98fb98", value: "Charlie"},{ style: "background-color:#98fb98", value: "Bob"},{ style: "background-color:#98fb98", value: "Alice"},{ style: "background-color:#98fb98", value: "Charlie"}] }, 
+{ name: "<span title=\"lastName: String\">lastName</span>", children: [], rightAlign: false, values: [{ style: "background-color:#98fb98", value: "Cooper"},{ style: "background-color:#98fb98", value: "Dylan"},{ style: "background-color:#98fb98", value: "Daniels"},{ style: "background-color:#98fb98", value: "Chaplin"},{ style: "background-color:#98fb98", value: "Marley"},{ style: "background-color:#98fb98", value: "Wolf"},{ style: "background-color:#98fb98", value: "Byrd"}] }, 
 { name: "<span title=\"name: DataRow<*>\">name</span>", children: [0, 1], rightAlign: false, values: ["<span class=\"formatted\" title=\"firstName: Alice\nlastName: Cooper\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cooper<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Bob\nlastName: Dylan\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dylan<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Daniels\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dan<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Chaplin\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cha<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Bob\nlastName: Marley\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Marley<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Alice\nlastName: Wolf\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Wolf<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Byrd\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Byrd<span class=\"structural\"> }</span></span>"] }, 
 { name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"] }, 
 { name: "<span title=\"city: String?\">city</span>", children: [], rightAlign: false, values: ["London","Dubai","Moscow","Milan","Tokyo","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","Moscow"] }, 
@@ -798,7 +798,7 @@
 
 /*<!--*/
 call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\">firstName</span>", children: [], rightAlign: false, values: ["Alice","Bob","Charlie","Charlie","Bob","Alice","Charlie"] }, 
-{ name: "<span title=\"lastName: String\">lastName</span>", children: [], rightAlign: false, values: ["Cooper","Dylan","Daniels","Chaplin","Marley","Wolf","Byrd"] }, 
+{ name: "<span title=\"lastName: String\">lastName</span>", children: [], rightAlign: false, values: [{ style: "background-color:#98fb98", value: "Cooper"},{ style: "background-color:#98fb98", value: "Dylan"},{ style: "background-color:#98fb98", value: "Daniels"},{ style: "background-color:#98fb98", value: "Chaplin"},{ style: "background-color:#98fb98", value: "Marley"},{ style: "background-color:#98fb98", value: "Wolf"},{ style: "background-color:#98fb98", value: "Byrd"}] }, 
 { name: "<span title=\"name: DataRow<*>\">name</span>", children: [0, 1], rightAlign: false, values: ["<span class=\"formatted\" title=\"firstName: Alice\nlastName: Cooper\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cooper<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Bob\nlastName: Dylan\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dylan<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Daniels\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dan<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Chaplin\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cha<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Bob\nlastName: Marley\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Marley<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Alice\nlastName: Wolf\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Wolf<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Byrd\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Byrd<span class=\"structural\"> }</span></span>"] }, 
 { name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: [{ style: "background-color:#98fb98", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>"},{ style: "background-color:#98fb98", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#98fb98", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"},{ style: "background-color:#98fb98", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>"},{ style: "background-color:#98fb98", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"},{ style: "background-color:#98fb98", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"},{ style: "background-color:#98fb98", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"}] }, 
 { name: "<span title=\"city: String?\">city</span>", children: [], rightAlign: false, values: ["London","Dubai","Moscow","Milan","Tokyo","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","Moscow"] }, 
@@ -811,7 +811,7 @@
 
 /*<!--*/
 call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\">firstName</span>", children: [], rightAlign: false, values: ["Alice","Bob","Charlie","Charlie","Bob","Alice","Charlie"] }, 
-{ name: "<span title=\"lastName: String\">lastName</span>", children: [], rightAlign: false, values: ["Cooper","Dylan","Daniels","Chaplin","Marley","Wolf","Byrd"] }, 
+{ name: "<span title=\"lastName: String\">lastName</span>", children: [], rightAlign: false, values: ["Cooper",{ style: "background-color:#98fb98", value: "Dylan"},"Daniels",{ style: "background-color:#98fb98", value: "Chaplin"},{ style: "background-color:#98fb98", value: "Marley"},"Wolf","Byrd"] }, 
 { name: "<span title=\"name: DataRow<*>\">name</span>", children: [0, 1], rightAlign: false, values: ["<span class=\"formatted\" title=\"firstName: Alice\nlastName: Cooper\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cooper<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Bob\nlastName: Dylan\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dylan<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Daniels\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dan<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Chaplin\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cha<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Bob\nlastName: Marley\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Marley<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Alice\nlastName: Wolf\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Wolf<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Byrd\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Byrd<span class=\"structural\"> }</span></span>"] }, 
 { name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>",{ style: "background-color:#98fb98", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},"<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>",{ style: "background-color:#98fb98", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>"},{ style: "background-color:#98fb98", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"},"<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"] }, 
 { name: "<span title=\"city: String?\">city</span>", children: [], rightAlign: false, values: ["London","Dubai","Moscow","Milan","Tokyo","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","Moscow"] }, 

docs/StardustDocs/resources/modify/operations/formatExample_strings.html

@@ -605,8 +605,8 @@
 call_DataFrame(function() { DataFrame.renderTable(0) });
 
 /*<!--*/
-call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\">firstName</span>", children: [], rightAlign: false, values: ["Alice","Bob","Charlie","Charlie","Bob","Alice","Charlie"] }, 
-{ name: "<span title=\"lastName: String\">lastName</span>", children: [], rightAlign: false, values: ["Cooper","Dylan","Daniels","Chaplin","Marley","Wolf","Byrd"] }, 
+call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\">firstName</span>", children: [], rightAlign: false, values: [{ style: "background-color:#98fb98", value: "Alice"},{ style: "background-color:#98fb98", value: "Bob"},{ style: "background-color:#98fb98", value: "Charlie"},{ style: "background-color:#98fb98", value: "Charlie"},{ style: "background-color:#98fb98", value: "Bob"},{ style: "background-color:#98fb98", value: "Alice"},{ style: "background-color:#98fb98", value: "Charlie"}] }, 
+{ name: "<span title=\"lastName: String\">lastName</span>", children: [], rightAlign: false, values: [{ style: "background-color:#98fb98", value: "Cooper"},{ style: "background-color:#98fb98", value: "Dylan"},{ style: "background-color:#98fb98", value: "Daniels"},{ style: "background-color:#98fb98", value: "Chaplin"},{ style: "background-color:#98fb98", value: "Marley"},{ style: "background-color:#98fb98", value: "Wolf"},{ style: "background-color:#98fb98", value: "Byrd"}] }, 
 { name: "<span title=\"name: DataRow<*>\">name</span>", children: [0, 1], rightAlign: false, values: [{ style: "background-color:#98fb98", value: "<span class=\"formatted\" title=\"firstName: Alice\nlastName: Cooper\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cooper<span class=\"structural\"> }</span></span>"},{ style: "background-color:#98fb98", value: "<span class=\"formatted\" title=\"firstName: Bob\nlastName: Dylan\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dylan<span class=\"structural\"> }</span></span>"},{ style: "background-color:#98fb98", value: "<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Daniels\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dan<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>"},{ style: "background-color:#98fb98", value: "<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Chaplin\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cha<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>"},{ style: "background-color:#98fb98", value: "<span class=\"formatted\" title=\"firstName: Bob\nlastName: Marley\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Marley<span class=\"structural\"> }</span></span>"},{ style: "background-color:#98fb98", value: "<span class=\"formatted\" title=\"firstName: Alice\nlastName: Wolf\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Wolf<span class=\"structural\"> }</span></span>"},{ style: "background-color:#98fb98", value: "<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Byrd\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Byrd<span class=\"structural\"> }</span></span>"}] }, 
 { name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"] }, 
 { name: "<span title=\"city: String?\">city</span>", children: [], rightAlign: false, values: ["London","Dubai","Moscow","Milan","Tokyo","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","Moscow"] }, 

docs/StardustDocs/resources/snippets/org.jetbrains.kotlinx.dataframe.samples.api.Modify.update.html

@@ -43,6 +43,22 @@ See [](#grammar) for everything that's available.
 The `format` function can be repeated as many times as needed and, to view the result, you can call
 [`toHtml()`/`toStandaloneHtml()`](toHTML.md).
 
+Specifying a [column group](DataColumn.md#columngroup) makes all of its inner columns
+be formatted in the same way unless overridden.
+
+Formatting is done additively, meaning you can add more formatting to a cell that's already formatted or
+override certain attributes inherited from its outer group.
+
+Specifying a [frame column](DataColumn.md#framecolumn) at the moment does nothing
+([Issue #1375](https://github.com/Kotlin/dataframe/issues/1375)),
+[](convert.md) each nested [`DataFrame`](DataFrame.md) to a `FormattedFrame` instead:
+
+```kotlin
+df.convert { myFrameCol }.with {
+    it.format { someCol }.with { background(green) }
+}.toStandaloneHtml()
+```
+
 #### Grammar {collapsible="true"}
 
 <inline-frame src="resources/org.jetbrains.kotlinx.dataframe.api.FormatDocs.Grammar.ForHtml.html" width="100%"/>
@@ -63,6 +79,8 @@ val ageMax = df.age.max()
 
 df
     .format().with { bold and textColor(black) and background(white) }
+    .format { name }.with { underline }
+    .format { name.lastName }.with { italic }
     .format { isHappy }.with { background(if (it) green else red) }
     .format { weight }.notNull().linearBg(50 to FormattingDsl.blue, 90 to FormattingDsl.red)
     .format { age }.perRowCol { row, col ->
@@ -81,6 +99,8 @@ val ageMax = df.max { "age"<Int>() }
 
 df
     .format().with { bold and textColor(black) and background(white) }
+    .format("name").with { underline }
+    .format { "name"["lastName"] }.with { italic }
     .format("isHappy").with {
         background(if (it as Boolean) green else red)
     }

docs/StardustDocs/resources/snippets/org.jetbrains.kotlinx.dataframe.samples.api.Modify.updateAsFrame.html

@@ -55,6 +55,8 @@ class Modify : DataFrameSampleHelper("operations", "modify") {
 
         df
             .format().with { bold and textColor(black) and background(white) }
+            .format("name").with { underline }
+            .format { "name"["lastName"] }.with { italic }
             .format("isHappy").with {
                 background(if (it as Boolean) green else red)
             }
@@ -77,6 +79,8 @@ class Modify : DataFrameSampleHelper("operations", "modify") {
 
         df
             .format().with { bold and textColor(black) and background(white) }
+            .format { name }.with { underline }
+            .format { name.lastName }.with { italic }
             .format { isHappy }.with { background(if (it) green else red) }
             .format { weight }.notNull().linearBg(50 to FormattingDsl.blue, 90 to FormattingDsl.red)
             .format { age }.perRowCol { row, col ->