docs: Add section and stat_table widgets.

website/sidebars.js

@@ -54,6 +54,7 @@ module.exports = {
           "widgets/content/header",
           "widgets/content/footer",
           "widgets/content/navigation",
+          "widgets/content/section",
           "widgets/content/breadcrumbs",
           "widgets/content/toolbar",
           "widgets/content/tabs",
@@ -80,6 +81,7 @@ module.exports = {
           "widgets/stat/large_bar_stat",
           "widgets/stat/small_stat",
           "widgets/stat/small_series_stat",
+          "widgets/stat/stat_table",
           "widgets/stat/tall_stats",
           "widgets/stat/tall_gauge_stat",
           "widgets/stat/tall_series_stat",

website/widgets/content/section.md

@@ -0,0 +1,27 @@
+---
+title: Section
+keywords:
+  - section
+custom_edit_url: null
+---
+
+
+Render a card displaying a title, a subtitle, and optional components.
+Section cards are typically used to demarcate different sections on a page.
+
+Check the full API at [ui.section_card](/docs/api/ui#section_card).
+
+```py
+q.page['section'] = ui.section_card(
+    box='1 1 7 1',
+    title='Your title',
+    subtitle='Your subtitle',
+    items=[
+        ui.toggle(name='search', label='Search', value=True),
+        ui.dropdown(name='distribution', label='', value='option0', choices=[
+            ui.choice(name=f'option{i}', label=f'Option {i}') for i in range(5)
+        ]),
+        ui.date_picker(name='target_date', label='', value='2020-12-25'),
+    ],
+)
+```

website/widgets/stat/table_stat.md → website/widgets/stat/stat_table.md

@@ -1,26 +1,24 @@
 ---
-title: Table Stat
+title: Stat Table 
 keywords:
   - stats
   - table
 custom_edit_url: null
 ---
 
 Use this stat if you need to display simple tabular data and don't need the full capabilities of `ui.table`.
-Values can have custom font colors provided in hexadecimal, [hsl](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl), [rgb](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb), [browser supported keywords](https://www.w3.org/wiki/CSS/Properties/color/keywords) (red, blue, green, etc), [Spectrum pallete](https://github.com/h2oai/wave/blob/main/ui/src/index.scss#L63-L81).
+
+Values can have custom font colors provided in hexadecimal, [hsl](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl), [rgb](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb), [browser supported keywords](https://www.w3.org/wiki/CSS/Properties/color/keywords) (red, blue, green, etc), [Wave colors](/docs/color-theming/#wave-colors).
 
 ```py
+values = ['Software Developer', 'New York']
+colors = ['darkblue', '$amber'] 
+
 q.page['example'] = ui.stat_table_card(
-    box='1 1 4 7',
+    box='1 1 4 4',
     title='Contacts',
-    subtitle=f'Last updated: 2022-04-13',
+    subtitle='Last updated: 2022-04-13',
     columns=['Name', 'Job', 'City'],
-    items=[
-          ui.stat_table_item(
-              label='Joe Doe',
-              values=['Software Developer', 'New York'],
-              colors=['darkblue', '$amber']
-          )
-    ]
+    items=[ui.stat_table_item(label='Joe Doe', values=values, colors=colors) for _ in range(5)]
 )
 ```