<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<script>
export const shippingAddressHeaders = [
  {
    title: 'Name',
    name: 'name',
    type: 'string'
  },
  {
    title: 'Address',
    name: 'addressLine1',
    type: 'string'
  },
  {
    title: 'Contact',
    name: 'contactNumber',
    type: 'string'
  },
  {
    title: 'Country',
    name: 'countryName',
    type: 'string'
  },
  {
    title: 'Actions',
    name: 'edit',
    type: 'string'
  }
];


 <Page className={classes.root} title={title}>
        <Container maxWidth={false}>
          <ViewHeader title={title} className={classes.content} />
          <div className={classes.content}>
            {shippingAddresses && (
              <>
                <CommonTableCtrl
                  className={classes.table}
                  isPagination={false}
                  headers={shippingAddressHeaders}
                  items={shippingAddresses}
                />
              </>
            )}
            {getForm(user.countryID)}
          </div>
        </Container>
        {toaster}
      </Page>
      
</script>