125 lines
7.6 KiB
JavaScript
125 lines
7.6 KiB
JavaScript
import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as o}from"./index-CO-0pc0F.js";import{M as a,C as n}from"./index-Z-6k0Xrj.js";import{T as i,D as l,a as d,b as c,P as h,S as u,F as p,c as m,d as x,e as b}from"./Table.stories-BA5xu8FV.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./each-CVpBMMjG.js";import"./html-CPeakWmR.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./Block-D3Ui8rd-.js";import"./journalize-K6hK94UL.js";import"./SearchInput-CsfDnQ1p.js";import"./input-DRdNoobV.js";function s(r){const t={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...o(),...r.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{of:i}),`
|
|
`,e.jsx(t.h1,{id:"table",children:"Table"}),`
|
|
`,e.jsxs(t.p,{children:["The ",e.jsx(t.code,{children:"Table"})," component presents data as a table that you can make searchable, filtereable, sortable, or paginated."]}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<script>
|
|
import { Table } from '@reuters-graphics/graphics-components';
|
|
|
|
import data from './data.json'; // Import your data
|
|
<\/script>
|
|
|
|
<Table {data} />
|
|
`})}),`
|
|
`,e.jsx(n,{of:l}),`
|
|
`,e.jsx(t.h2,{id:"text-elements",children:"Text elements"}),`
|
|
`,e.jsxs(t.p,{children:["Set the ",e.jsx(t.code,{children:"title"}),", ",e.jsx(t.code,{children:"dek"}),", ",e.jsx(t.code,{children:"notes"})," and ",e.jsx(t.code,{children:"source"})," options to add supporting metadata above and below the table."]}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<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"
|
|
/>
|
|
`})}),`
|
|
`,e.jsx(n,{of:d}),`
|
|
`,e.jsx(t.h2,{id:"truncated",children:"Truncated"}),`
|
|
`,e.jsxs(t.p,{children:["When your table has 10 or more rows, consider clipping it by setting the ",e.jsx(t.code,{children:"truncated"})," option. When it is enabled, the table is clipped and readers must click a button below the table to see all rows."]}),`
|
|
`,e.jsxs(t.p,{children:["By default, this configuration will limit the table to 5 records. Change the cutoff point by adjusting the ",e.jsx(t.code,{children:"truncateLength"})," option."]}),`
|
|
`,e.jsx(t.p,{children:"This is a good option for simple tables with between 10 and 30 rows. It works best when the table doesn't require interactivity."}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<Table data={yourData} truncated={true} source="Source: Baseball Reference" />
|
|
`})}),`
|
|
`,e.jsx(n,{of:c}),`
|
|
`,e.jsx(t.h2,{id:"paginated",children:"Paginated"}),`
|
|
`,e.jsxs(t.p,{children:["When your table has many rows, you should consider breaking it up into pages by setting ",e.jsx(t.code,{children:"paginated"})," to ",e.jsx(t.code,{children:"true"}),". When it is enabled, readers can leaf through the data using a set of buttons below the table."]}),`
|
|
`,e.jsxs(t.p,{children:["By default, there are 25 records per page. Change the number by adjusting the ",e.jsx(t.code,{children:"pageSize"})," option."]}),`
|
|
`,e.jsx(t.p,{children:"This is a good option when publishing large tables for readers to explore. It works well with interactive features like searching and filters."}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<Table
|
|
data={yourData}
|
|
paginated={true}
|
|
title="Press Freedom Index"
|
|
source="Reporters Without Borders"
|
|
/>
|
|
`})}),`
|
|
`,e.jsx(n,{of:h}),`
|
|
`,e.jsx(t.h2,{id:"search-bar",children:"Search bar"}),`
|
|
`,e.jsxs(t.p,{children:["Allow users to search the table by setting the optional ",e.jsx(t.code,{children:"searchable"})," option to ",e.jsx(t.code,{children:"true"}),". Modify the default text that appears in the box by setting ",e.jsx(t.code,{children:"searchPlaceholder"})," to a different placeholder text."]}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<Table
|
|
data={yourData}
|
|
searchable={true}
|
|
paginated={true}
|
|
searchPlaceholder="Search press freedom data"
|
|
,
|
|
title="Press Freedom Index"
|
|
notes="Source: Reporters Without Borders"
|
|
/>
|
|
`})}),`
|
|
`,e.jsx(n,{of:u}),`
|
|
`,e.jsx(t.h2,{id:"filter",children:"Filter"}),`
|
|
`,e.jsxs(t.p,{children:["Allow users to filter the table by providing one of the attributes as the ",e.jsx(t.code,{children:"filterField"}),". This works best with categorical columns."]}),`
|
|
`,e.jsxs(t.p,{children:["Set ",e.jsx(t.code,{children:"filterLabel"})," to make the category name more readable. For example, if the column is ",e.jsx(t.code,{children:"Region"}),", set ",e.jsx(t.code,{children:"filterLabel"})," to ",e.jsx(t.code,{children:"regions"})," or ",e.jsx(t.code,{children:"regions of the world"}),"."]}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<Table
|
|
data={yourData}
|
|
filterField="Region"
|
|
filterLabel="regions"
|
|
paginated={true}
|
|
title="Press Freedom Index"
|
|
notes="Source: Reporters Without Borders"
|
|
/>
|
|
`})}),`
|
|
`,e.jsx(n,{of:p}),`
|
|
`,e.jsx(t.h2,{id:"search-and-filter",children:"Search and filter"}),`
|
|
`,e.jsx(t.p,{children:"Feel free to both search and filter."}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<Table
|
|
data={yourData}
|
|
searchable={true}
|
|
paginated={true}
|
|
filterField="Region"
|
|
filterLabel="regions"
|
|
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"
|
|
/>
|
|
`})}),`
|
|
`,e.jsx(n,{of:m}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{children:`
|
|
## Sort
|
|
|
|
Allow users to sort the table by setting \`sortable\` to \`true\`. 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}
|
|
paginated={true}
|
|
sortField="Score"
|
|
sortDirection="descending"
|
|
title="Press Freedom Index"
|
|
source="Source: Reporters Without Borders"
|
|
/>
|
|
`})}),`
|
|
`,e.jsx(n,{of:x}),`
|
|
`,e.jsx(t.h2,{id:"format",children:"Format"}),`
|
|
`,e.jsxs(t.p,{children:["Format column values by supplying functions keyed to field names with the ",e.jsx(t.code,{children:"fieldFormatters"})," option. Columns are still sorted using the raw, underlying values."]}),`
|
|
`,e.jsxs(t.p,{children:["Among other things, this feature can be used to provide a unit of measurement, such as ",e.jsx(t.code,{children:"$"})," or ",e.jsx(t.code,{children:"%"}),", with numeric fields."]}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<script lang="ts">
|
|
const fieldFormatters = {
|
|
// The key must match the column name in the data exactly
|
|
'Net worth (in billions)': (v) => '$' + v.toFixed(1),
|
|
};
|
|
<\/script>
|
|
|
|
<Table
|
|
data={yourData}
|
|
{fieldFormatters}
|
|
sortable={true}
|
|
sortField="Net worth (in billions)"
|
|
sortDirection="descending"
|
|
title="The Richest Women in the World"
|
|
source="Source: Forbes"
|
|
/>
|
|
`})}),`
|
|
`,e.jsx(n,{of:b})]})}function $(r={}){const{wrapper:t}={...o(),...r.components};return t?e.jsx(t,{...r,children:e.jsx(s,{...r})}):s(r)}export{$ as default};
|