Adding material dark
diff --git a/NAMESPACE b/NAMESPACE
index bca3902..99c313b 100644
--- a/NAMESPACE
+++ b/NAMESPACE
@@ -27,6 +27,7 @@
export(kable_as_xml)
export(kable_classic)
export(kable_material)
+export(kable_material_dark)
export(kable_minimal)
export(kable_styling)
export(landscape)
diff --git a/R/light_themes.R b/R/light_themes.R
index 63e578d..425f4dd 100644
--- a/R/light_themes.R
+++ b/R/light_themes.R
@@ -3,8 +3,8 @@
#' @description kableExtra uses the built-in bootstrap themes by default in
#' `kable_styling()`. Alternatively, you can use a customized table themes for
#' your table. This `lightable` table style sheet comes with three formats,
-#' namely `lightable-minimal`, `lightable-classic` and `lightable-material` with
-#' `hover` and `striped` options.
+#' namely `lightable-minimal`, `lightable-classic`, `lightable-material` and
+#' `lightable-material-dark` with `hover` and `striped` options.
#'
#' @param kable_input A HTML kable object.
#' @param lightable_options Options to customize lightable. Similar with
@@ -29,6 +29,12 @@
kable_light(kable_input, "lightable-material", lightable_options, ...)
}
+#' @rdname kable_classic
+#' @export
+kable_material_dark <- function(kable_input, lightable_options = "basic", ...) {
+ kable_light(kable_input, "lightable-material-dark", lightable_options, ...)
+}
+
kable_light <- function(kable_input, light_class, lightable_options, ...) {
lightable_options <- match.arg(lightable_options,
choices = c("basic", "striped", "hover"),
diff --git a/docs/awesome_table_in_html.Rmd b/docs/awesome_table_in_html.Rmd
index 229c1e8..a434ce1 100644
--- a/docs/awesome_table_in_html.Rmd
+++ b/docs/awesome_table_in_html.Rmd
@@ -68,7 +68,7 @@
```
## Alternative themes
-`kableExtra` also offers a few in-house alternative HTML table themes other than the default bootstrap theme. Right now there are three of them: `kable_classic`, `kable_minimal` and `kable_material`. These functions are alternatives to `kable_styling`, which means that you can specify any additional formatting options in `kable_styling` in these functions too. The only difference is that `bootstrap_options` (as discussed in the next section) is replaced with `lightable_options` at the same location with only two choices `striped` and `hover` available.
+`kableExtra` also offers a few in-house alternative HTML table themes other than the default bootstrap theme. Right now there are three of them: `kable_classic`, `kable_minimal`, `kable_material` and `kable_material_dark`. These functions are alternatives to `kable_styling`, which means that you can specify any additional formatting options in `kable_styling` in these functions too. The only difference is that `bootstrap_options` (as discussed in the next section) is replaced with `lightable_options` at the same location with only two choices `striped` and `hover` available.
```{r}
dt %>%
@@ -88,6 +88,12 @@
kable_material(c("striped", "hover"))
```
+```{r}
+dt %>%
+ kable() %>%
+ kable_material_dark()
+```
+
# Table Styles
diff --git a/docs/awesome_table_in_html.html b/docs/awesome_table_in_html.html
index 21c67f0..164b67f 100644
--- a/docs/awesome_table_in_html.html
+++ b/docs/awesome_table_in_html.html
@@ -11,7 +11,7 @@
<meta name="author" content="Hao Zhu" />
-<meta name="date" content="2020-08-10" />
+<meta name="date" content="2020-08-11" />
<title>Create Awesome HTML Table with knitr::kable and kableExtra</title>
@@ -1362,11 +1362,14 @@
margin-bottom: 10px;
}
.lightable-material th {
-padding: 0.8em;
-background-color: #f5f5f5;
+height: 56px;
+padding-left: 16px;
+padding-right: 16px;
}
.lightable-material td {
-padding: 0.8em;
+height: 52px;
+padding-left: 16px;
+padding-right: 16px;
border-top: 1px solid #eeeeee;
}
.lightable-material.lightable-hover tbody tr:hover {
@@ -1376,11 +1379,46 @@
background-color: #f5f5f5;
}
.lightable-material.lightable-striped td {
-border: 0px;
+border: 0;
}
.lightable-material.lightable-striped thead tr:last-child th {
border-bottom: 1px solid #ddd;
}
+.lightable-material-dark {
+min-width: 100%;
+white-space: nowrap;
+table-layout: fixed;
+font-family: Roboto, sans-serif;
+border: 1px solid #FFFFFF12;
+border-collapse: collapse;
+margin-bottom: 10px;
+background-color: #363640;
+}
+.lightable-material-dark th {
+height: 56px;
+padding-left: 16px;
+padding-right: 16px;
+color: #FFFFFF60;
+}
+.lightable-material-dark td {
+height: 52px;
+padding-left: 16px;
+padding-right: 16px;
+color: #FFFFFF;
+border-top: 1px solid #FFFFFF12;
+}
+.lightable-material-dark.lightable-hover tbody tr:hover {
+background-color: #FFFFFF12;
+}
+.lightable-material-dark.lightable-striped tr:nth-child(even) {
+background-color: #FFFFFF12;
+}
+.lightable-material-dark.lightable-striped td {
+border: 0;
+}
+.lightable-material-dark.lightable-striped thead tr:last-child th {
+border-bottom: 1px solid #FFFFFF12;
+}
</style>
<style type="text/css">code{white-space: pre;}</style>
@@ -1611,7 +1649,7 @@
<h1 class="title toc-ignore">Create Awesome HTML Table with knitr::kable and kableExtra</h1>
<h4 class="author">Hao Zhu</h4>
-<h4 class="date">2020-08-10</h4>
+<h4 class="date">2020-08-11</h4>
</div>
@@ -1946,7 +1984,7 @@
</div>
<div id="alternative-themes" class="section level2">
<h2>Alternative themes</h2>
-<p><code>kableExtra</code> also offers a few in-house alternative HTML table themes other than the default bootstrap theme. Right now there are three of them: <code>kable_classic</code>, <code>kable_minimal</code> and <code>kable_material</code>. These functions are alternatives to <code>kable_styling</code>, which means that you can specify any additional formatting options in <code>kable_styling</code> in these functions too. The only difference is that <code>bootstrap_options</code> (as discussed in the next section) is replaced with <code>lightable_options</code> at the same location with only two choices <code>striped</code> and <code>hover</code> available.</p>
+<p><code>kableExtra</code> also offers a few in-house alternative HTML table themes other than the default bootstrap theme. Right now there are three of them: <code>kable_classic</code>, <code>kable_minimal</code>, <code>kable_material</code> and <code>kable_material_dark</code>. These functions are alternatives to <code>kable_styling</code>, which means that you can specify any additional formatting options in <code>kable_styling</code> in these functions too. The only difference is that <code>bootstrap_options</code> (as discussed in the next section) is replaced with <code>lightable_options</code> at the same location with only two choices <code>striped</code> and <code>hover</code> available.</p>
<pre class="r"><code>dt %>%
kable() %>%
kable_classic()</code></pre>
@@ -2385,6 +2423,152 @@
</tr>
</tbody>
</table>
+<pre class="r"><code>dt %>%
+ kable() %>%
+ kable_material_dark()</code></pre>
+<table class=" lightable-material-dark" style="margin-left: auto; margin-right: auto;">
+<thead>
+<tr>
+<th style="text-align:left;">
+</th>
+<th style="text-align:right;">
+mpg
+</th>
+<th style="text-align:right;">
+cyl
+</th>
+<th style="text-align:right;">
+disp
+</th>
+<th style="text-align:right;">
+hp
+</th>
+<th style="text-align:right;">
+drat
+</th>
+<th style="text-align:right;">
+wt
+</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left;">
+Mazda RX4
+</td>
+<td style="text-align:right;">
+21.0
+</td>
+<td style="text-align:right;">
+6
+</td>
+<td style="text-align:right;">
+160
+</td>
+<td style="text-align:right;">
+110
+</td>
+<td style="text-align:right;">
+3.90
+</td>
+<td style="text-align:right;">
+2.620
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Mazda RX4 Wag
+</td>
+<td style="text-align:right;">
+21.0
+</td>
+<td style="text-align:right;">
+6
+</td>
+<td style="text-align:right;">
+160
+</td>
+<td style="text-align:right;">
+110
+</td>
+<td style="text-align:right;">
+3.90
+</td>
+<td style="text-align:right;">
+2.875
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Datsun 710
+</td>
+<td style="text-align:right;">
+22.8
+</td>
+<td style="text-align:right;">
+4
+</td>
+<td style="text-align:right;">
+108
+</td>
+<td style="text-align:right;">
+93
+</td>
+<td style="text-align:right;">
+3.85
+</td>
+<td style="text-align:right;">
+2.320
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Hornet 4 Drive
+</td>
+<td style="text-align:right;">
+21.4
+</td>
+<td style="text-align:right;">
+6
+</td>
+<td style="text-align:right;">
+258
+</td>
+<td style="text-align:right;">
+110
+</td>
+<td style="text-align:right;">
+3.08
+</td>
+<td style="text-align:right;">
+3.215
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Hornet Sportabout
+</td>
+<td style="text-align:right;">
+18.7
+</td>
+<td style="text-align:right;">
+8
+</td>
+<td style="text-align:right;">
+360
+</td>
+<td style="text-align:right;">
+175
+</td>
+<td style="text-align:right;">
+3.15
+</td>
+<td style="text-align:right;">
+3.440
+</td>
+</tr>
+</tbody>
+</table>
</div>
</div>
<div id="table-styles" class="section level1">
@@ -5640,7 +5824,7 @@
3
</td>
<td style="text-align:center;">
-1
+0
</td>
</tr>
<tr>
@@ -5648,7 +5832,7 @@
4
</td>
<td style="text-align:center;">
-0
+1
</td>
</tr>
<tr>
@@ -5656,7 +5840,7 @@
5
</td>
<td style="text-align:center;">
-1
+0
</td>
</tr>
<tr>
@@ -5664,7 +5848,7 @@
6
</td>
<td style="text-align:center;">
-0
+1
</td>
</tr>
<tr>
@@ -5732,7 +5916,7 @@
13
</td>
<td style="text-align:center;">
-0
+1
</td>
</tr>
<tr>
diff --git a/inst/lightable-0.0.1/lightable.css b/inst/lightable-0.0.1/lightable.css
index c1b7e9b..dc8fbb6 100644
--- a/inst/lightable-0.0.1/lightable.css
+++ b/inst/lightable-0.0.1/lightable.css
@@ -58,12 +58,15 @@
}
.lightable-material th {
- padding: 0.8em;
- background-color: #f5f5f5;
+ height: 56px;
+ padding-left: 16px;
+ padding-right: 16px;
}
.lightable-material td {
- padding: 0.8em;
+ height: 52px;
+ padding-left: 16px;
+ padding-right: 16px;
border-top: 1px solid #eeeeee;
}
@@ -82,3 +85,45 @@
.lightable-material.lightable-striped thead tr:last-child th {
border-bottom: 1px solid #ddd;
}
+
+.lightable-material-dark {
+ min-width: 100%;
+ white-space: nowrap;
+ table-layout: fixed;
+ font-family: Roboto, sans-serif;
+ border: 1px solid #FFFFFF12;
+ border-collapse: collapse;
+ margin-bottom: 10px;
+ background-color: #363640;
+}
+
+.lightable-material-dark th {
+ height: 56px;
+ padding-left: 16px;
+ padding-right: 16px;
+ color: #FFFFFF60;
+}
+
+.lightable-material-dark td {
+ height: 52px;
+ padding-left: 16px;
+ padding-right: 16px;
+ color: #FFFFFF;
+ border-top: 1px solid #FFFFFF12;
+}
+
+.lightable-material-dark.lightable-hover tbody tr:hover {
+ background-color: #FFFFFF12;
+}
+
+.lightable-material-dark.lightable-striped tr:nth-child(even) {
+ background-color: #FFFFFF12;
+}
+
+.lightable-material-dark.lightable-striped td {
+ border: 0;
+}
+
+.lightable-material-dark.lightable-striped thead tr:last-child th {
+ border-bottom: 1px solid #FFFFFF12;
+}
diff --git a/man/kable_classic.Rd b/man/kable_classic.Rd
index 89884ea..a8d9edd 100644
--- a/man/kable_classic.Rd
+++ b/man/kable_classic.Rd
@@ -4,6 +4,7 @@
\alias{kable_classic}
\alias{kable_minimal}
\alias{kable_material}
+\alias{kable_material_dark}
\title{Alternative HTML themes}
\usage{
kable_classic(kable_input, lightable_options = "basic", ...)
@@ -11,6 +12,8 @@
kable_minimal(kable_input, lightable_options = "basic", ...)
kable_material(kable_input, lightable_options = "basic", ...)
+
+kable_material_dark(kable_input, lightable_options = "basic", ...)
}
\arguments{
\item{kable_input}{A HTML kable object.}