Skip to content

Commit

Permalink
Fixed table aligning
Browse files Browse the repository at this point in the history
  • Loading branch information
@karelvaculik
karelvaculik committed Sep 6, 2023
1 parent 59a450f commit 0dc3834
Show file tree
Hide file tree
Showing 17 changed files with 279 additions and 1,154 deletions.
2 changes: 1 addition & 1 deletion docs/configuration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ parameters. The following table shows the parameter alternatives between these t
| `numbered-tables` | `--numbered-tables` | `numbered` in [`print_table()`](../api/pyreball_html/#pyreball.html.print_table) | Whether to number tables. Allowed values: `yes`, `no`. |
| `tables-display-option` | `--tables-display-option` | `display_option` in [`print_table()`](../api/pyreball_html/#pyreball.html.print_table) | How to display table. This option is useful for long tables, which should not be displayed fully. Allowed values are: `full` (show the full table), `scrolling` (show the table in scrolling mode on y-axis), `paging` (show the table in paging mode). |
| `tables-paging-sizes` | `--tables-paging-sizes` | `paging_sizes` in [`print_table()`](../api/pyreball_html/#pyreball.html.print_table) | The paging sizes that can be selected. Ignored when `tables-display-option` is not `paging`. Allowed values are integers and string `all` (no matter the case of letters), written as a non-empty comma-separated list. |
| `tables-scroll-y-height` | `--tables-scroll-y-height` | `scroll_y_height` in [`print_table()`](../api/pyreball_html/#pyreball.html.print_table) | Height of the tables when `tables-display-option` is set to `scrolling`. Allowed values TODO |
| `tables-scroll-y-height` | `--tables-scroll-y-height` | `scroll_y_height` in [`print_table()`](../api/pyreball_html/#pyreball.html.print_table) | Height of the tables when `tables-display-option` is set to `scrolling`. Any string compatible with CSS sizing can be used, e.g. `300px`, `20em`, etc. |
| `tables-scroll-x` | `--tables-scroll-x` | `scroll_x` in [`print_table()`](../api/pyreball_html/#pyreball.html.print_table) | Whether to allow scrolling on the x-axis. If turned off, a wide table is allowed to overflow the main container. It is recommended to turn this on, especially with `tables-display-option` set to `scrolling`, because otherwise the table header won't interact properly when scrolling horizontally. Allowed values: `yes`, `no`. |
| `sortable-tables` | `--sortable-tables` | `sortable` in [`print_table()`](../api/pyreball_html/#pyreball.html.print_table) | Whether to make columns in tables sortable. Allowed values: `yes`, `no`. |
| `tables-search-box` | `--tables-search-box` | `show_search_box` in [`print_table()`](../api/pyreball_html/#pyreball.html.print_table) | Whether to show the search box for the tables. Allowed values: `yes`, `no`. |
Expand Down
5 changes: 4 additions & 1 deletion docs/examples/table_captions.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,7 @@
pb.print_table(df, caption="People with their age.")
pb.print_table(df, caption="People with their age.", numbered=False)
pb.print_table(df, numbered=False)
pb.print_table(df, caption="The table with numbering again.")
pb.print_table(
df,
caption="The table with numbering again. But much bigger caption.",
)
12 changes: 6 additions & 6 deletions docs/examples/table_sorting.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@

df = pd.DataFrame(
{
"name": ["Bob", "Carol", "Alice", "Dave"],
"age": [23, 5, 22, 54],
"name": ["Bob", "Carol", "Alice", "Dave", "Alice"],
"age": [23, 5, 22, 54, 18],
}
)
pb.print_table(df, caption="Sortable table", sortable=True)
pb.print_table(
df,
caption="Table sorted by name (ASC).",
sorting_definition=("name", "asc"),
caption="Table sorted by age (ASC).",
sorting_definition=[(df.columns.get_loc("age") + 1, "asc")],
)
pb.print_table(
df,
caption="Table sorted by age (DESC).",
sorting_definition=("age", "desc"),
caption="Table sorted by name (ASC) and age (DESC).",
sorting_definition=[(1, "asc"), (2, "desc")],
)
25 changes: 18 additions & 7 deletions docs/tables.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ via `numbered` parameter.

{{ inline_source("docs/examples/table_captions.py") }}

<iframe style="border:2px solid;" src="../examples/table_captions.html" height="800" width="100%" title="Iframe Example"></iframe>
<iframe style="border:2px solid;" src="../examples/table_captions.html" height="1000" width="100%" title="Iframe Example"></iframe>

Note that internally all tables are numbered, even though the numbering might be turned off.

Expand All @@ -30,26 +30,37 @@ The position can be controlled by `caption_position` parameter, which can be se

{{ inline_source("docs/examples/table_caption_position.py") }}

<iframe style="border:2px solid;" src="../examples/table_caption_position.html" height="440" width="100%" title="Iframe Example"></iframe>
<iframe style="border:2px solid;" src="../examples/table_caption_position.html" height="600" width="100%" title="Iframe Example"></iframe>

## Aligning

Tables can be horizontally aligned by `align` parameter, as shown in the following code example.

{{ inline_source("docs/examples/table_align.py") }}

<iframe style="border:2px solid;" src="../examples/table_align.html" height="700" width="100%" title="Iframe Example"></iframe>
<iframe style="border:2px solid;" src="../examples/table_align.html" height="800" width="100%" title="Iframe Example"></iframe>

## Sorting

TODO: update this section.

It is possible to make the table sortable on all columns by setting `sortable` parameter to `True`,
or by setting `sorting_definition` parameter, which also sorts the table initially on the specified column.
or by setting `sorting_definition` parameter, which also sorts the table initially on the specified column(s).

Parameter `sorting_definition` expects a list of tuples, where each tuple contains a column index and string `asc`
or `desc`. The table is primarily sorted according to the first tuple, secondarily according to the second tuple, and so
on.

The following snippet shows the usage of both parameters.

!!! note

Although the columns in `sorting_definition` are indexed from 0, it is necessary to take into account
also the index when it is displayed. To hide the index, set `index` parameter
of [`print_table()`](../api/pyreball_html/#pyreball.html.print_table) method to `False`.
`index` parameter is one of the `kwargs` that are passed to pandas `to_html()` method.

{{ inline_source("docs/examples/table_sorting.py") }}

<iframe style="border:2px solid;" src="../examples/table_sorting.html" height="800" width="100%" title="Iframe Example"></iframe>
<iframe style="border:2px solid;" src="../examples/table_sorting.html" height="900" width="100%" title="Iframe Example"></iframe>

## Dealing with Large Tables

Expand Down
98 changes: 5 additions & 93 deletions examples/custom_arguments.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,16 +52,6 @@
};


$(document).ready(function () {
$('.sortable_table').DataTable({
"paging": false,
"searching": false,
"info": false,
});
});



function next(div_id, button_next_id, button_prev_id) {
var qElems = document.querySelectorAll(div_id + '>div');
for (var i = 0; i < qElems.length; i++) {
Expand Down Expand Up @@ -101,7 +91,7 @@
}

.main_container {
width: 90%;
width: 80%;
margin-left: auto;
margin-right: auto;
}
Expand All @@ -119,56 +109,22 @@
display: block;
}

table.dataframe {
border-style: none;
border-width: 0px;
border-collapse: separate;
border-spacing: 0;
font-size: 80%;
}

.text-centered {
text-align: center;
}

.table-wrapper
{
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
margin-top: 30px;
margin-bottom: 30px;
}


.table-wrapper-inner {
.table-fit-content {
width: fit-content;
max-width: 100%;
}

.table-scroller
{
overflow: auto; /* scrollable */
margin-top: 10px;
max-height: none; /* don't show all cells - the last one should be hidden a bit */
width: fit-content;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}

.table-scroller-collapsed
{
overflow: auto; /* scrollable */
margin-top: 10px;
max-height: 390px; /* don't show all cells - the last one should be hidden a bit */
width: fit-content;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}

.table-expander {
background: rgb(250, 250, 250);
cursor: pointer;
margin-bottom: 10px;
}

.centered {
Expand All @@ -190,49 +146,6 @@
font-weight: bold;
}

.dataframe tbody tr th:only-of-type {
vertical-align: middle;
border-width: 0px;
padding: 6px;
}

.dataframe tbody tr th {
border-width: 0px;
}

.dataframe tbody > tr:nth-child(odd) {
background: rgb(245, 245, 245);
}

.dataframe tbody > tr:hover {
background: #c4e3f3;
}

.dataframe td {
vertical-align: top;
border-width: 0px;
padding: 6px;
}

.dataframe thead th {
border-bottom-width: 1px;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
/*top: 0; */
position: sticky;
background: white;
}

.dataframe thead tr:nth-child(1) th { position: sticky; top: 0; } /* first row of table header */
.dataframe thead tr:nth-child(2) th { position: sticky; top: 28px; } /* second row of table header */

.dataframe tr, th {
text-align: right;
vertical-align: middle;
padding: 6px;
}

a.anchor-link:link {
text-decoration: none;
padding: 0px 20px;
Expand Down Expand Up @@ -260,7 +173,6 @@
<body>
<div class="main_container">
<h1 id="toc_generated_0">Custom Arguments<a class="anchor-link" href="#toc_generated_0"></a></h1>
<div>The sum of the arg values is 72.</div>
</div>
</body>
<script>
Expand Down
Loading

0 comments on commit 0dc3834

Please sign in to comment.