deletes old docs
This commit is contained in:
parent
46a84609ed
commit
0645c636fa
10 changed files with 0 additions and 146 deletions
|
|
@ -1,13 +0,0 @@
|
|||
Feel free to both search and filter.
|
||||
|
||||
```svelte
|
||||
<table
|
||||
data="{yourData}"
|
||||
searchable="{true}"
|
||||
filterField="{'Region'}"
|
||||
paginated="{true}"
|
||||
title="{'Press Freedom Index'}"
|
||||
dek="{'Reporters Without Borders ranks countries based on their level of press freedom using criteria such as the degree of media pluralism and violence against journalists.'}"
|
||||
source="{'Source: Reporters Without Borders'}"
|
||||
></table>
|
||||
```
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
Present structured data in a table. Consider making it interactive.
|
||||
|
||||
---
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Table } from '@reuters-graphics/graphics-components';
|
||||
|
||||
// Import your data as JSON, or otherwise structure it
|
||||
import yourData from './stories/homeRuns.json';
|
||||
</script>
|
||||
|
||||
<table data="{yourData}"></table>
|
||||
```
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
Allow users to filter the table by providing one of the attributes as the `filterField`. This works best with categorical columns.
|
||||
|
||||
```svelte
|
||||
<table
|
||||
data="{yourData}"
|
||||
filterField="{'Region'}"
|
||||
paginated="{true}"
|
||||
title="{'Press Freedom Index'}"
|
||||
notes="{'Source: Reporters Without Borders'}"
|
||||
></table>
|
||||
```
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
Format column values by supplying functions keyed to field names with the `fieldFormatters` option. Columns are still sorted using the raw, underlying values.
|
||||
|
||||
Among other things, this feature can be used to provide a unit of measurement with numeric fields.
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
const fieldFormatters = {
|
||||
'Net worth (in billions)': (v) => '$' + v.toFixed(1),
|
||||
};
|
||||
</script>
|
||||
|
||||
<table
|
||||
data="{yourData}"
|
||||
fieldFormatters="{fieldFormatters}"
|
||||
sortable="{true}"
|
||||
sortField="{'Score'}"
|
||||
sortDirection="{'descending'}"
|
||||
title="{'The Richest Women in the World'}"
|
||||
source="{'Source: Forbes'}"
|
||||
></table>
|
||||
```
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
Set the `title`, `dek`, `notes` and `source` options to add supporting metadata above and below the table.
|
||||
|
||||
```svelte
|
||||
<Table
|
||||
data="{yourData}"
|
||||
title="{'Career home run leaders'}"
|
||||
dek="{`In baseball,
|
||||
a home run (also known as a "dinger" or "tater") occurs when a batter hits the
|
||||
ball over the outfield fence. When a home run is hit, the batter and any runners
|
||||
on base are able to score.`}"
|
||||
notes="{'Note: As of Opening Day 2023'}"
|
||||
source="{'Source: Baseball Reference'}"
|
||||
/>
|
||||
```
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
When your table has lots of rows you should consider breaking it up into pages. This can be done by setting the `paginated` option.
|
||||
|
||||
When it is enabled, readers can leaf through the data using a set of buttons below the table. By default there are 25 records per page. You can change the number by adjusting the `pageSize` option.
|
||||
|
||||
This is a good option when publishing large tables for readers to explore. It works well with interactive features like searching and filters.
|
||||
|
||||
```svelte
|
||||
<table
|
||||
data="{yourData}"
|
||||
paginated="{true}"
|
||||
title="{'Press Freedom Index'}"
|
||||
source="{'Reporters Without Borders'}"
|
||||
></table>
|
||||
```
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
Allow users to search the table by setting the optional `searchable` variable. Modify the default text that appears in the box by supplying the `searchPlaceholder` option.
|
||||
|
||||
```svelte
|
||||
<table
|
||||
data="{yourData}"
|
||||
searchable="{true}"
|
||||
paginated="{true}"
|
||||
title="{'Press Freedom Index'}"
|
||||
notes="{'Source: Reporters Without Borders'}"
|
||||
></table>
|
||||
```
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
Allow users to sort the table by setting the `sortable` input. Specify the starting order by setting `sortField` to a column name and `sortDirection` to `ascending` or `descending`.
|
||||
|
||||
By default, all fields are sortable. If you'd like to limit the columns where sorting is allowed, provide a list to the `sortableFields` option.
|
||||
|
||||
```svelte
|
||||
<table
|
||||
data="{yourData}"
|
||||
sortable="{true}"
|
||||
sortField="{'Score'}"
|
||||
sortDirection="{'descending'}"
|
||||
title="{'Press Freedom Index'}"
|
||||
source="{'Source: Reporters Without Borders'}"
|
||||
></table>
|
||||
```
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
You can tailor the table's appearance by crafting CSS that targets specific elements.
|
||||
|
||||
Like other components, you can apply labels by providing the `id` of `cls` options, which allow you to make broad changes that remain limited to your element.
|
||||
|
||||
Each column has a `data-field` attribute that contains the field's name. Use it to apply different styles to different fields. One common use is setting different text alignments on different columns.
|
||||
|
||||
```svelte
|
||||
<table
|
||||
id="{'custom-table'}"
|
||||
data="{yourData}"
|
||||
title="{'The Richest Women in the World'}"
|
||||
source="{'Source: Forbes'}"
|
||||
></table>
|
||||
|
||||
<style lang="scss">
|
||||
/* Here we right align the table's numeric column. */
|
||||
#custom-table {
|
||||
[data-field='Net worth (in billions)'] {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
When your table has 10 or more rows, consider clipping it by setting the `truncated` option. When it is enabled, the table is clipped and readers must request to see all rows by clicking a button below the table. By default this configuration will limit the table to five records. You can change the cutoff point by adjusting the `truncateLength` option.
|
||||
|
||||
This is a good option for simple tables with row counts between 10 and 30. It works best when the table doesn't require interactivity.
|
||||
|
||||
```svelte
|
||||
<table
|
||||
data="{yourData}"
|
||||
truncated="{true}"
|
||||
source="{'Source: Baseball Reference'}"
|
||||
></table>
|
||||
```
|
||||
Loading…
Reference in a new issue