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};