Skip to content

Commit 707eb76

Browse files
juzserjuzser
committed
Update: documentation
1 parent 64e7e9c commit 707eb76

2 files changed

Lines changed: 279 additions & 1 deletion

File tree

‎src/components/DataTable/DataTable.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ div(:class="wrapperClassName")
5252
)
5353
template(v-if="hasSlot(slots['heading-0'])")
5454
slot(name="heading-0")
55-
template(v-else) okokok {{ headings[0] }}
55+
template(v-else) {{ headings[0] }}
5656

5757
TableHeading(
5858
v-for="heading, index in headings",

‎src/components/DataTable/README.stories.mdx‎

Lines changed: 278 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,278 @@
1+
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
2+
import { Card, DataTable, TextStyle, Link } from '@/polaris-vue';
3+
import { computed, ref } from 'vue';
4+
import dedent from 'ts-dedent';
5+
6+
<Meta
7+
title="Components / Lists and tables / Data table"
8+
component={ DataTable }
9+
argTypes={{
10+
default: {
11+
table: { disable: true },
12+
},
13+
defaultSortDirection: {
14+
options: ['ascending', 'descending', 'none'],
15+
control: { type: 'select' },
16+
table: {
17+
type: { summary: 'ascending | descending | none' },
18+
},
19+
},
20+
headings: {
21+
table: {
22+
type: { summary: 'string[]' },
23+
},
24+
},
25+
rows: {
26+
control: { disable: true },
27+
table: {
28+
type: { summary: '<string | number>[][]' },
29+
},
30+
},
31+
sortable: {
32+
table: {
33+
type: { summary: 'boolean[]' },
34+
},
35+
},
36+
verticalAlign: {
37+
options: ['top', 'middle', 'bottom', 'baseline'],
38+
control: { type: 'select' },
39+
table: {
40+
type: { summary: 'top | bottom | middle | baseline' },
41+
},
42+
},
43+
propsFooterContent: {
44+
name: 'footerContent',
45+
description: 'Content centered in the full width cell of the table footer row. This prop will be overridden by the `\#footerContent` slot if it is provided.',
46+
table: {
47+
category: 'props',
48+
type: { summary: 'string' },
49+
},
50+
},
51+
footerContent: {
52+
description: 'Content centered in the full width cell of the table footer row. This slot will override the `footerContent` prop.',
53+
table: {
54+
type: { summary: null },
55+
},
56+
control: { disable: true },
57+
},
58+
'heading-0': {
59+
table: { disable: true },
60+
},
61+
'heading-[index]': {
62+
description: 'Slot to display each header as dynamic content. Example: `heading-0` will be the slot for the first column\'s heading.',
63+
table: { category: 'slots', type: { summary: null }},
64+
},
65+
'cell-[cellIndex]-row-[rowIndex]': {
66+
description: 'Slot to display each cell as dynamic content. Example: `cell-1-row-2` will be the slot for the second column in third row.',
67+
table: { category: 'slots', type: { summary: null }},
68+
},
69+
'totalsName-plural': {
70+
description: 'Custom totals row heading for plural. This slot will override the `totalsName.plural` prop.',
71+
table: { type: { summary: null }},
72+
control: { disable: true },
73+
},
74+
'totalsName-singular': {
75+
description: 'Custom totals row heading for singular. This slot will override the `totalsName.singular` prop.',
76+
table: { type: { summary: null }},
77+
control: { disable: true },
78+
},
79+
sort: {
80+
description: 'Callback fired on click or keypress of a sortable column heading.',
81+
control: { disable: true },
82+
table: {
83+
type: {
84+
summary: '(headingIndex: number, direction: SortDirection) => void',
85+
},
86+
},
87+
},
88+
}}
89+
/>
90+
91+
export const Template = (args) => ({
92+
components: { Card, DataTable, TextStyle, Link },
93+
setup() {
94+
const initiallySortedRows = [
95+
[
96+
{ url: 'https://google.com', key: 'emerald', content: 'Emerald Silk Gown'},
97+
'$875.00', 124689, 140, '$122,500.00',
98+
],
99+
[
100+
{ url: 'https://google.com', key: 'mauve', content: 'Mauve Cashmere Scarf'},
101+
'$230.00', 124533, 83, '$19,090.00',
102+
],
103+
[
104+
{ url: 'https://google.com', key: 'navy', content: 'Navy Merino Wool Blazer with khaki chinos and yellow belt'},
105+
'$445.00', 124518, 32, '$14,240.00',
106+
],
107+
];
108+
const sortedRows = ref(null);
109+
const rows = computed(() => {
110+
return sortedRows.value ? sortedRows.value : initiallySortedRows;
111+
});
112+
const handleSort = (index, direction) => {
113+
sortedRows.value = sortCurrency(rows.value, index, direction);
114+
}
115+
function sortCurrency(trows, index, direction) {
116+
return [...trows].sort((rowA, rowB) => {
117+
const amountA = parseFloat(rowA[index].substring(1));
118+
const amountB = parseFloat(rowB[index].substring(1));
119+
return direction === 'descending' ? amountB - amountA : amountA - amountB;
120+
});
121+
}
122+
return { args, rows, handleSort };
123+
},
124+
template: `<Card>
125+
<DataTable
126+
v-bind="args"
127+
:rows="rows"
128+
:footerContent="\`Showing \${rows.length} of \${rows.length} results\`"
129+
@sort="handleSort"
130+
>
131+
<template #heading-0>
132+
<TextStyle variation="strong">Product</TextStyle>
133+
</template>
134+
<template
135+
v-for="row, index in rows"
136+
:key="index"
137+
#[\`cell-0-row-\${index}\`]
138+
>
139+
<Link remove-underline :url="row[0].url">{{ row[0].content }}</Link>
140+
</template>
141+
<template
142+
v-for="row, index in rows"
143+
:key="index"
144+
#[\`cell-1-row-\${index}\`]
145+
>
146+
<TextStyle variation="positive">{{ row[1] }}</TextStyle>
147+
</template>
148+
</DataTable>
149+
</Card>`,
150+
});
151+
152+
# Data table
153+
154+
Data tables are used to organize and display all information from a data set. While a data visualization represents part of data set, a data table lets merchants view details from the entire set. This helps merchants compare and analyze the data.
155+
156+
<Canvas>
157+
<Story
158+
name="Data table"
159+
height="350px"
160+
args={{
161+
totalsName: { singular: 'Total net sales', plural: 'Total net sales' },
162+
columnContentTypes: [
163+
'text',
164+
'numeric',
165+
'numeric',
166+
'numeric',
167+
'numeric',
168+
],
169+
headings: [
170+
'Product',
171+
'Price',
172+
'SKU Number',
173+
'Net quantity',
174+
'Net sales',
175+
],
176+
totals: ['', '', '', 255, '$155,830.00'],
177+
sortable: [false, true, false, false, true],
178+
initialSortColumnIndex: 4,
179+
defaultSortDirection: 'descending',
180+
truncate: true,
181+
stickyHeader: true,
182+
hasFixedFirstColumn: true,
183+
}}
184+
parameters={{
185+
docs: {
186+
source: {
187+
state: 'close',
188+
code: dedent`
189+
<Card>
190+
<DataTable
191+
:totalsName="{singular: 'Total net sales', plural: 'Total net sales'}"
192+
:columnContentTypes="columnContentTypes"
193+
:headings="tableHeadings"
194+
:rows="rows"
195+
:totals="['', '', '', 255, '$155,830.00']"
196+
:sortable="[false, true, false, false, true]"
197+
:initialSortColumnIndex="4"
198+
defaultSortDirection="descending"
199+
:footerContent="\`Showing \${rows.length} of \${rows.length} results\`"
200+
:truncate="false"
201+
showTotalsInFooter
202+
stickyHeader
203+
hasFixedFirstColumn
204+
@sort="handleSort"
205+
>
206+
<template #heading-0>
207+
<TextStyle variation="strong">Product</TextStyle>
208+
</template>
209+
<template
210+
v-for="row, index in rows"
211+
:key="index"
212+
#[\`cell-0-row-\${index}\`]
213+
>
214+
<Link remove-underline :url="row[0].url">{{ row[0].content }}</Link>
215+
</template>
216+
<template
217+
v-for="row, index in rows"
218+
:key="index"
219+
#[\`cell-1-row-\${index}\`]
220+
>
221+
<TextStyle variation="positive">{{ row[1] }}</TextStyle>
222+
</template>
223+
</DataTable>
224+
</Card>\n
225+
<script setup>
226+
const tableHeadings = [
227+
'Product',
228+
'Price',
229+
'SKU Number',
230+
'Net quantity',
231+
'Net sales',
232+
];\n
233+
const columnContentTypes = [
234+
'text',
235+
'numeric',
236+
'numeric',
237+
'numeric',
238+
'numeric',
239+
];\n
240+
const initiallySortedRows = [
241+
[
242+
{ url: 'https://google.com', key: 'emerald', content: 'Emerald Silk Gown'},
243+
'$875.00', 124689, 140, '$122,500.00',
244+
],
245+
[
246+
{ url: 'https://google.com', key: 'mauve', content: 'Mauve Cashmere Scarf'},
247+
'$230.00', 124533, 83, '$19,090.00',
248+
],
249+
[
250+
{ url: 'https://google.com', key: 'navy', content: 'Navy Merino Wool Blazer with khaki chinos and yellow belt'},
251+
'$445.00', 124518, 32, '$14,240.00',
252+
],
253+
];\n
254+
const sortedRows = ref(null);
255+
const rows = computed(() => {
256+
return sortedRows.value ? sortedRows.value : initiallySortedRows;
257+
});\n
258+
const handleSort = (index, direction) => {
259+
sortedRows.value = sortCurrency(rows.value, index, direction);
260+
}\n
261+
function sortCurrency(trows, index, direction) {
262+
return [...trows].sort((rowA, rowB) => {
263+
const amountA = parseFloat(rowA[index].substring(1));
264+
const amountB = parseFloat(rowB[index].substring(1));
265+
return direction === 'descending' ? amountB - amountA : amountA - amountB;
266+
});
267+
}
268+
</script>
269+
`,
270+
},
271+
},
272+
}}
273+
>
274+
{Template.bind({})}
275+
</Story>
276+
</Canvas>
277+
278+
<ArgsTable story="Data table" />

0 commit comments

Comments
 (0)