responsive table glitch

[judell]

Use the the code below in a playground. Here is what happens. Watch the Posts column when Username gets hidden.

responsive-table.mp4

<App var.people="{
  [
    {
      avatar_url: 'https://example.com/avatar1.jpg',
      display_name: 'Nicole Parsons',
      username: 'Npars01',
      statuses_count: 1247,
      server: 'mstdn.social',
      followers_count: 3574,
      following_count: 7500,
      instance_qualified_account_url: 'https://mstdn.social/@Npars01',
      mutual: false
    },
    {
      avatar_url: 'https://example.com/avatar2.jpg',
      display_name: 'samiamsam',
      username: 'samiamsam',
      statuses_count: 892,
      server: 'mastodon.social',
      followers_count: 986,
      following_count: 1965,
      instance_qualified_account_url: 'https://mastodon.social/@samiamsam',
      mutual: false
    },
    {
      avatar_url: 'https://example.com/avatar3.jpg',
      display_name: 'S. Grisham',
      username: 'xerophile',
      statuses_count: 2156,
      server: 'union.place',
      followers_count: 2021,
      following_count: 7335,
      instance_qualified_account_url: 'https://union.place/@xerophile',
      mutual: false
    },
    {
      avatar_url: 'https://example.com/avatar4.jpg',
      display_name: 'Tuckers Nuts Res',
      username: 'jstatepost',
      statuses_count: 1834,
      server: 'mstdn.social',
      followers_count: 2146,
      following_count: 3609,
      instance_qualified_account_url: 'https://mstdn.social/@jstatepost',
      mutual: false
    },
    {
      avatar_url: 'https://example.com/avatar5.jpg',
      display_name: 'Coach Pãnini ®',
      username: 'paninid',
      statuses_count: 3421,
      server: 'mastodon.world',
      followers_count: 2537,
      following_count: 2644,
      instance_qualified_account_url: 'https://mastodon.world/@paninid',
      mutual: true
    },
    {
      avatar_url: 'https://example.com/avatar6.jpg',
      display_name: 'Cory Doctorow',
      username: 'pluralistic',
      statuses_count: 12847,
      server: 'mamot.fr',
      followers_count: 64443,
      following_count: 940,
      instance_qualified_account_url: 'https://mamot.fr/@pluralistic',
      mutual: false
    },
    {
      avatar_url: 'https://example.com/avatar7.jpg',
      display_name: 'Steve\'s Place',
      username: 'steter',
      statuses_count: 567,
      server: 'mastodon.stev...',
      followers_count: 993,
      following_count: 1698,
      instance_qualified_account_url: 'https://mastodon.stev.../@steter',
      mutual: false
    },
    {
      avatar_url: 'https://example.com/avatar8.jpg',
      display_name: 'Lisa Melton',
      username: 'lisamelton',
      statuses_count: 9876,
      server: 'mastodon.social',
      followers_count: 45402,
      following_count: 7253,
      instance_qualified_account_url: 'https://mastodon.social/@lisamelton',
      mutual: false
    },
    {
      avatar_url: 'https://example.com/avatar9.jpg',
      display_name: 'Martin Vermeer F',
      username: 'martinvermeer',
      statuses_count: 2341,
      server: 'fediscience.org',
      followers_count: 1031,
      following_count: 1017,
      instance_qualified_account_url: 'https://fediscience.org/@martinvermeer',
      mutual: false
    }
  ]
}">
  <VStack>
    <Text>PeopleTable Demo - Size: {mediaSize.size}</Text>

    <Table data="{people}">
      <!-- Avatar column - always show -->
      <Column header="" width="60px">
        <Avatar
          size="xs"
          name="{$item.display_name || $item.username}"
          item="{$item}"
        />
      </Column>

      <!-- Mutual column - always show but narrower on small screens -->
      <Column header="Mutual" width="50px" bindTo="mutual">
        <Fragment when="{$item.mutual}">
          <CHStack width="100%">
            <Icon name="binding" />
          </CHStack>
        </Fragment>
      </Column>

      <!-- Name column - always show -->
      <Column header="Name" bindTo="display_name">
        <Fragment when="{$item.instance_qualified_account_url}">
          <Link to="{$item.instance_qualified_account_url}" target="_blank">
            {$item.display_name || $item.username}
          </Link>
        </Fragment>
      </Column>

      <!-- Username column - hidden on xs, sm, md screens -->
      <Column header="Username" bindTo="username" when="{mediaSize.size !== 'xs' && mediaSize.size !== 'sm' && mediaSize.size !== 'md'}">
        @{$item.username}
      </Column>

      <!-- Posts column - always show -->
      <Column header="Posts" bindTo="statuses_count" />

      <!-- Server column - hidden on xs, sm screens -->
      <Column header="Server" bindTo="server" when="{mediaSize.size !== 'xs' && mediaSize.size !== 'sm'}" />

      <!-- Followers column - hidden on xs, sm screens -->
      <Column header="Followers" bindTo="followers_count" when="{mediaSize.size !== 'xs' && mediaSize.size !== 'sm'}" />

      <!-- Following column - hidden on xs, sm screens -->
      <Column header="Following" bindTo="following_count" when="{mediaSize.size !== 'xs' && mediaSize.size !== 'sm'}" />

    </Table>
  </VStack>
</App>