github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/stories/Table.stories.tsx (about)

     1  /* eslint-disable react/jsx-props-no-spreading */
     2  import React from 'react';
     3  import Table from '../webapp/javascript/ui/Table';
     4  import { randomId } from '../webapp/javascript/util/randomId';
     5  import { ComponentStory, ComponentMeta } from '@storybook/react';
     6  import '../webapp/sass/profile.scss';
     7  
     8  export default {
     9    title: 'Components/Table',
    10    component: Table,
    11  } as ComponentMeta<typeof Table>;
    12  
    13  const items = Array.from({ length: 20 }).map((a, i) => {
    14    return {
    15      id: i,
    16      value: randomId(),
    17    };
    18  });
    19  
    20  export const MyTable = () => {
    21    const headRow = [
    22      { name: '', label: 'Id', sortable: 1 },
    23      { name: '', label: 'Value', sortable: 1 },
    24    ];
    25  
    26    const bodyRows = items.map((a) => {
    27      return {
    28        onClick: () => alert(`clicked on ${JSON.stringify(a)}`),
    29        cells: [{ value: a.id }, { value: a.value }],
    30      };
    31    });
    32  
    33    return (
    34      <Table
    35        itemsPerPage={5}
    36        table={{
    37          type: 'filled',
    38          headRow,
    39          bodyRows,
    40        }}
    41      />
    42    );
    43  };