@postnord/web-components
Version:
PostNord Web Components
107 lines (106 loc) • 2.89 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { unfold } from "pn-design-assets/pn-assets/icons";
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-table-docs.json";
import { getFigmaUrl } from "../../../globals/figmaLinks";
const { argTypes, textContent } = createDocumentation(docs);
/**
* A simple table with predefined styling. `pn-table` is a wrapper for you own table element,
* it does not generate the rows, columns or any sorting features.
*
```
// You can use the following class to create a wrapper for your column content.
<td><div class="column-wrapper">...</div></td>
```
*/
const meta = {
title: 'Components/Content/Table',
parameters: {
docs: {
description: {
story: textContent,
},
},
design: {
type: 'figma',
url: getFigmaUrl(import.meta.url),
},
},
args: {
bordered: false,
striped: false,
gray: false,
},
argTypes,
};
export default meta;
export const PnTable = {
name: 'pn-table',
render: args => {
const table = createComponent('pn-table', args);
table.innerHTML += `
<table>
<thead>
<tr>
<th>
<div class="column-wrapper">
ID
<pn-button small appearance="light" icon='${unfold}' tooltip="Order by ID" />
</div>
</th>
<th>
<div class="column-wrapper">
Name
<pn-button small appearance="light" icon='${unfold}' tooltip="Order by name" />
</div>
</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>124TS</td>
<td>Noe Halvorson</td>
<td>94626 Kaden Mount, Jerdebury, Cambridgeshire</td>
</tr>
<tr>
<td>422YS</td>
<td>Tracey Rau</td>
<td>95668 Bernhard Branch, Walkerbury, Avon</td>
</tr>
<tr>
<td>635TT</td>
<td>Darion Gorczany</td>
<td>8879 Mariam Key, Vandervortside, Bedfordshire</td>
</tr>
<tr>
<td>231FS</td>
<td>Rebekah Kunde</td>
<td>4948 Cletus Burgs, East Bradley, Borders</td>
</tr>
</tbody>
</table>
`;
return table;
},
};
/** Display stripes on the pn-table. */
export const PnTableStriped = {
name: 'pn-table (striped)',
render: PnTable.render,
args: {
striped: true,
},
};
/** Display borders on the pn-table. */
export const PnTableBordered = {
name: 'pn-table (bordered)',
render: PnTable.render,
args: {
bordered: true,
},
};
//# sourceMappingURL=pn-table.stories.js.map