design-system-simplefi
Version:
Design System for SimpleFi Applications
121 lines • 3.59 kB
JavaScript
var __spreadArray = (this && this.__spreadArray) || function (to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
};
import React from 'react';
import { Table } from './Table';
export default {
title: 'components/Table/DataTable',
component: Table,
};
var PercentageCell = function (_a) {
var value = _a.value;
var parsedValue = parseFloat(value.toString()).toLocaleString('en-US', {
minimumFractionDigits: 0,
maximumFractionDigits: 1,
style: 'percent',
});
return React.createElement("div", null, parsedValue);
};
var columns = [
{
id: 'test1',
header: 'Token',
value: 'title',
renderCell: function (_a) {
var title = _a.title;
return React.createElement("p", null,
" ",
title);
},
options: {
filterable: true,
sortable: true,
},
},
{
id: 'test',
header: 'Balance',
value: 'balance',
options: {
collapseManyDecimals: true,
filterable: true,
sortable: true,
filterRange: {
min: 0,
max: 10,
step: 1,
units: 'tokens',
},
},
tooltipMessage: 'More than 2 decimals will be collapsed in this column',
},
{
id: 'test2',
header: 'Holdings Percent',
value: 'holdingsPercent',
renderCell: function (_a) {
var holdingsPercent = _a.holdingsPercent;
return (React.createElement(PercentageCell, { value: holdingsPercent }));
},
options: {
// collapseManyDecimals: true,
filterable: true,
sortable: true,
filterRange: {
min: 0,
max: 10,
step: 1,
units: 'tokens',
},
},
},
];
var data = [
{
key: 'aave1',
title: 'aavetest',
balance: 8,
holdingsPercent: 0.33,
expanded: [React.createElement("div", null, "farm"), React.createElement("div", null, "farm2")],
},
{
key: ' uni2',
title: 'uni',
balance: 500.01,
holdingsPercent: 0.224424,
expanded: [React.createElement("p", null, "farm"), React.createElement("p", null, "farm2")],
},
{
key: ' uni3',
title: 'uni',
balance: 5,
holdingsPercent: 0.45,
expanded: [React.createElement("p", null, "farm"), React.createElement("p", null, "farm2")],
},
{
key: ' uni4',
title: 'uni',
balance: 0.00001,
holdingsPercent: 0.1212,
},
{
key: ' sushi',
title: 'sushi',
balance: 222220.34512340001,
holdingsPercent: 0.87,
},
{
key: ' sushi2',
title: 'sushi',
balance: 1.1111111111,
holdingsPercent: 0.12,
},
];
export var TableHeadingWithListFilter = function () { return (React.createElement("div", { style: {
height: '400px',
width: '100%',
} },
React.createElement(Table, { align: "left", callback: function () { }, columns: columns, customSort: function (data) { return __spreadArray([], data).sort(function (a, b) { return b.balance - a.balance; }); }, data: data, stickyHeaderTop: 0, tableId: "storybook-expandableTable", filterable: true, sortable: true, stickyHeader: true }))); };
//# sourceMappingURL=Table.stories.js.map