import { Meta , Story } from '@storybook/react' ; import { ListTable } from './ListTable' ; import { IColumn , IDynamicValues , IFooterFColumn } from '../GridTable/types' ; import { ArrowDownBlue } from '../../icons' ; import React from 'react' ; export default { title : 'Components/Interface/ListTable' , component : ListTable } as Meta ; interface IProps { id ? : string ; content : IDynamicValues [ ] ; columns : IColumn [ ] ; footerColumns ? : IFooterFColumn [ ] ; noResultText : string ; tableHeight ? : number ; onPageChange ? : ( currentPage : number ) => void ; disableScrollOnOverflow ? : boolean ; pageSize ? : number ; totalItems ? : number ; currentPage ? : number ; isLoading ? : boolean ; tableTitle ? : string ; hideBoxShadow ? : boolean ; hideTableHeader ? : boolean ; loadMoreText ? : string ; highlightRowOnMouseOver ? : boolean ; isFullPage ? : boolean ; fixedWidth ? : number ; sortIconInverted : boolean ; sortKey : string | null ; tableOffsetTop : number ; } const list = [ { name : 'Euan' , role : 'Registrar' , type : 'Chairman' , status : 'Active' } , { name : 'Euan' , role : 'Registrar' , type : 'Chairman' , status : 'Active' } , { name : 'Euan' , role : 'Registrar' , type : 'Chairman' , status : 'Active' } , { name : 'Euan' , role : 'Registrar' , type : 'Chairman' , status : 'Active' } , { name : 'Euan' , role : 'Registrar' , type : 'Chairman' , status : 'Active' } , { name : 'Euan' , role : 'Registrar' , type : 'Chairman' , status : 'Active' } , { name : 'Euan' , role : 'Registrar' , type : 'Chairman' , status : 'Active' } , { name : 'Euan' , role : 'Registrar' , type : 'Chairman' , status : 'Active' } , { name : 'Euan' , role : 'Registrar' , type : 'Chairman' , status : 'Active' } ] ; const columns = [ { label : 'Name' , width : 30 , key : 'name' , isSortable : true , icon : < ArrowDownBlue />, sortFunction : ( key ) => alert ( `Sort by: ${ key }` ) } , { label : 'Role' , width : 30 , key : 'role' , isSortable : true , icon : < ArrowDownBlue />, sortFunction : ( key ) => alert ( `Sort by: ${ key }` ) } , { label : 'Type' , width : 30 , key : 'type' } , { label : 'Status' , width : 10 , key : 'status' } ] ; const footerColumns = [ { label : '' , width : 30 } , { label : 'Rule' , width : 30 } , { label : 'Type' , width : 30 } , { label : 'Status' , width : 10 } ] ; const Template = ( args ) => < ListTable { ... args } / > ; export const ListView = Template . bind ( { } ) ; ListView . args = { tableTitle : 'Table Title' , content : list , columns , noResultText : 'No result to display' , footerColumns } ;