Fluz Table Example

table.tsx

function InvoicesTable(){
  const [selectedStatus, setSelectedStatus] = useState<MercoaApi.InvoiceStatus[]>([MercoaApi.InvoiceStatus.Draft])
  return (
    <div>
      <Tabs onClick={key => {
        if(key === 'drafts'){
          setSelectedStatus([MercoaApi.InvoiceStatus.Draft])
        } else if (key === 'in-progress'){
          setSelectedStatus([
            MercoaApi.InvoiceStatus.New,
            MercoaApi.InvoiceStatus.Approved,
            MercoaApi.InvoiceStatus.Scheduled,
          ])
        } else if (key === 'history'){
          setSelectedStatus([
            MercoaApi.InvoiceStatus.Paid,
            MercoaApi.InvoiceStatus.Canceled,
            MercoaApi.InvoiceStatus.Archived,
          ])
        }
      }}
      tabs={[{
        label: 'Drafts',
        key: 'drafts',
      },
      {
        label: 'In progress',
        key: 'in-progress',
      },
      {
        label: 'History',
        key: 'history',
      }]}
      />
      <PayablesTable statuses={selectedStatus} >
        {({invoices, dataLoaded, hasNext, hasPrevious, count,}) => <Table 
          data={invoices.map(xyz)}
          onRowClick={invoice => {
            Router.push(PATH + invoice.id)
          }}
          pagination={true}

        />}
        </PayablesTable>
    </div>
}