wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Start a table

Browse source
This commit is contained in:
palewire 2023-03-26 14:27:41 -07:00
parent c4d4baddfb
commit 14771cd9c4
5 changed files with 30721 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/components/Table/Table.stories.svelte Normal file
View file

@ -0,0 +1,43 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
// Don't lose the "?raw" in markdown imports!
// @ts-ignore
import componentDocs from './stories/docs/component.md?raw';
import Table from './Table.svelte';
import { withComponentDocs } from '$docs/utils/withParams.js';
// You can import JSON you need in stories directly in code!
// @ts-ignore
import AirportsData from './stories/airports.json';
const meta = {
title: 'Components/Table',
component: Table,
...withComponentDocs(componentDocs),
// https://storybook.js.org/docs/svelte/essentials/controls
argTypes: {
width: {
control: 'select',
options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
},
},
};
</script>
<Meta {...meta} />
<Template let:args>
<Table {...args} />
</Template>
<Story
name="Default"
args="{{
width: 'normal',
data: AirportsData,
includedFields: ['iata', 'name', 'city', 'state'],
}}"
/>

258
src/components/Table/Table.svelte Normal file
View file

@ -0,0 +1,258 @@
<!-- @component `Table` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Table--default) -->
<script lang="ts">
import { onMount } from 'svelte';
/**
* A source for the data.
* @required
*/
export let data: [];
// A list of the fields to include in the table. By default everything goes.
export let includedFields: string[] = Object.keys(data[0]);
export let allowSearch: boolean = true;
export let searchPlaceholder: string = 'Type to search';
// Table row limit
export let pageSize: number = 25;
// You can declare custom types to help users implement your component.
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
/** Width of the component within the text well. */
export let width: ContainerWidth = 'normal';
/** Add an ID to target with SCSS. */
export let id: string = '';
/** Add a class to target with SCSS. */
export let cls: string = '';
/** Import local helpers */
import Block from '../Block/Block.svelte';
import { filterArray, paginateArray, numberWithCommas } from './utils.js';
/** Set filtering and pagination configuration */
let pageNumber = 1;
let searchText = '';
$: filteredData = filterArray(data, searchText);
$: currentPageData = paginateArray(filteredData, pageSize, pageNumber);
//* * Handle filtering and pagination events */
function handleSearchInput(event) {
searchText = event.target.value;
pageNumber = 1;
}
function goToPreviousPage() {
if (pageNumber > 1) {
pageNumber -= 1;
}
}
function goToNextPage() {
if (pageNumber < Math.ceil(filteredData.length / pageSize)) {
pageNumber += 1;
}
}
/** Boot it up. */
onMount(() => {
data.forEach((d) => {
d.searchStr = includedFields
.map((field) => d[field])
.join(' ')
.toLowerCase();
});
});
</script>
<Block width="{width}" id="{id}" cls="{cls}">
<section class="table-wrapper">
{#if allowSearch}
<section class="input">
<div class="search">
<input
id="search--input"
class="search--input"
type="text"
placeholder="{searchPlaceholder}"
on:input="{handleSearchInput}"
/>
</div>
</section>
{/if}
<section class="table">
<table>
<thead>
<tr>
{#each includedFields as field}
<th>{field}</th>
{/each}
</tr>
</thead>
<tbody>
{#each currentPageData as item, idx}
<tr data-row-index="{idx}">
{#each includedFields as field}
<td>
{@html item[field]}
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
</section>
{#if filteredData.length > pageSize}
<nav aria-label="pagination" class="pagination">
<button on:click="{goToPreviousPage}" disabled="{pageNumber === 1}"
><div class="icon-wrapper">
<svg
class="icon"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 6 11"
><path
d="m1.76 5.134 3.887-3.887a.71.71 0 0 0 0-1.027.709.709 0 0 0-1.027 0l-4.4 4.4a.71.71 0 0 0 0 1.027l4.4 4.4c.147.147.367.22.513.22a.79.79 0 0 0 .513-.22.71.71 0 0 0 0-1.027L1.76 5.133Z"
></path></svg
> <span class="visually-hidden">Previous page</span>
</div></button
>
<span class="label" aria-label="page {pageNumber}" aria-current="page"
>{pageNumber * pageSize - pageSize + 1}-{pageNumber * pageSize -
pageSize +
currentPageData.length} of {numberWithCommas(
filteredData.length
)}</span
>
<button
on:click="{goToNextPage}"
disabled="{pageNumber === Math.ceil(filteredData.length / pageSize)}"
><div class="icon-wrapper">
<svg
class="icon"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 7 11"
><path
d="m6.013 4.987-4.4-4.4a.71.71 0 0 0-1.027 0 .709.709 0 0 0 0 1.027L4.473 5.5.586 9.387a.71.71 0 0 0 0 1.027c.147.147.293.22.513.22.22 0 .367-.073.514-.22l4.4-4.4a.71.71 0 0 0 0-1.027Z"
></path></svg
> <span class="visually-hidden">Next page</span>
</div></button
>
</nav>
{/if}
</section>
</Block>
<style lang="scss">
@import '../../scss/colours/thematic/tr';
@import '../../scss/fonts/variables';
.table-wrapper {
margin: 2rem 0;
}
section.table {
overflow-x: auto;
table {
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
font-size: 1rem;
font-family: var(--theme-font-family-sans-serif, $font-family-sans-serif);
color: var(--theme-colour-text-primary, $tr-dark-grey);
thead {
tr {
border-bottom: 1px solid $tr-muted-grey;
th {
font-weight: 500;
vertical-align: bottom;
}
}
}
tbody {
tr {
border-bottom: 1px solid $tr-light-muted-grey;
}
td {
line-height: 2rem;
}
}
}
}
section.input {
margin: 16px 0;
background-color: $tr-ultra-light-grey;
padding: 1.25rem 0.75rem;
font-size: 1rem;
width: 100%;
border: 1px solid $tr-light-muted-grey;
.search {
.search--input {
padding: 0.33rem;
font-size: 1.15rem;
height: 2.3rem;
border: 1px solid $tr-muted-grey;
border-radius: 5px;
width: 300px;
}
}
}
nav.pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 1rem;
font-size: 1rem;
font-family: $font-family-display;
font-weight: 400;
button {
padding: 5px 10px;
border: 1px solid;
border-color: $tr-contrast-grey;
border-radius: 8px;
background: $white;
color: $tr-medium-grey;
cursor: pointer;
width: 40px;
height: 40px;
&:disabled {
border-color: $tr-light-grey;
color: $tr-light-grey;
cursor: default;
}
.icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
transition: all 0.15s ease;
.icon {
height: 1rem;
width: 1rem;
fill: currentColor;
}
}
}
.label {
margin: 0 1rem;
}
}
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
</style>

30386
src/components/Table/stories/airports.json Normal file
View file

File diff suppressed because it is too large Load diff

16
src/components/Table/stories/docs/component.md Normal file
View file

@ -0,0 +1,16 @@
Present structured data in an interactive table
---
```svelte
<script>
import { Table } from '@reuters-graphics/graphics-components';
const sampleData = [];
</script>
<Table
width: 'normal',
data: sampleData,
/>
```

18
src/components/Table/utils.js Normal file
View file

@ -0,0 +1,18 @@
export function filterArray(data, searchText) {
if (!searchText) {
return data;
}
return data.filter((item) => {
return item.searchStr.includes(searchText.toLowerCase());
});
}
export function paginateArray(array, pageSize, pageNumber) {
return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
}
export function numberWithCommas(n) {
const parts = n.toString().split('.');
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return parts.join('.');
}