Skip to content
HyperUI for Flutter
HyperUI for Flutter requires the Style package — this site itself ships no pub package.

Tables

Ported from HyperUI’s Tables — see Attribution.

Base

Section titled “Base”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class Tables1Example extends StatelessWidget {
  const Tables1Example({super.key});


  static const _headers = ['Name', 'DoB', 'Role', 'Salary'];


  static const _rows = <List<String>>[
    ['Nandor the Relentless', '04/06/1262', 'Vampire Warrior', r'$0'],
    ['Laszlo Cravensworth', '19/10/1678', 'Vampire Gentleman', r'$0'],
    ['Nadja', '15/03/1593', 'Vampire Seductress', r'$0'],
    ['Colin Robinson', '01/09/1971', 'Energy Vampire', r'$53,000'],
    ['Guillermo de la Cruz', '18/11/1991', 'Familiar/Vampire Hunter', r'$0'],
  ];


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'overflow-x-auto',
        child: Style(
          'min-w-full divide-y-2 divide-gray-200 dark:divide-gray-700',
          children: [
            Style(
              'ltr:text-left rtl:text-right',
              child: Style(
                '*:font-medium *:text-gray-900 dark:*:text-white',
                children: [
                  for (final label in _headers)
                    Style('px-3 py-2 whitespace-nowrap', child: Text(label)),
                ],
              ),
            ),
            Style(
              'divide-y divide-gray-200 dark:divide-gray-700',
              children: [
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[0])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[1])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[2])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[3])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[4])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Bordered

Section titled “Bordered”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class Tables2Example extends StatelessWidget {
  const Tables2Example({super.key});


  static const _headers = ['Name', 'DoB', 'Role', 'Salary'];


  static const _rows = <List<String>>[
    ['Nandor the Relentless', '04/06/1262', 'Vampire Warrior', r'$0'],
    ['Laszlo Cravensworth', '19/10/1678', 'Vampire Gentleman', r'$0'],
    ['Nadja', '15/03/1593', 'Vampire Seductress', r'$0'],
    ['Colin Robinson', '01/09/1971', 'Energy Vampire', r'$53,000'],
    ['Guillermo de la Cruz', '18/11/1991', 'Familiar/Vampire Hunter', r'$0'],
  ];


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'overflow-x-auto rounded border border-gray-300 shadow-sm dark:border-gray-600',
        child: Style(
          'min-w-full divide-y-2 divide-gray-200 dark:divide-gray-700',
          children: [
            Style(
              'ltr:text-left rtl:text-right',
              child: Style(
                '*:font-medium *:text-gray-900 dark:*:text-white',
                children: [
                  for (final label in _headers)
                    Style('px-3 py-2 whitespace-nowrap', child: Text(label)),
                ],
              ),
            ),
            Style(
              'divide-y divide-gray-200 dark:divide-gray-700',
              children: [
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[0])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[1])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[2])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[3])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[4])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Striped

Section titled “Striped”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class Tables3Example extends StatelessWidget {
  const Tables3Example({super.key});


  static const _headers = ['Name', 'DoB', 'Role', 'Salary'];


  static const _rows = <List<String>>[
    ['Nandor the Relentless', '04/06/1262', 'Vampire Warrior', r'$0'],
    ['Laszlo Cravensworth', '19/10/1678', 'Vampire Gentleman', r'$0'],
    ['Nadja', '15/03/1593', 'Vampire Seductress', r'$0'],
    ['Colin Robinson', '01/09/1971', 'Energy Vampire', r'$53,000'],
    ['Guillermo de la Cruz', '18/11/1991', 'Familiar/Vampire Hunter', r'$0'],
  ];


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'overflow-x-auto',
        child: Style(
          'min-w-full divide-y-2 divide-gray-200 dark:divide-gray-700',
          children: [
            Style(
              'ltr:text-left rtl:text-right',
              child: Style(
                '*:font-medium *:text-gray-900 dark:*:text-white',
                children: [
                  for (final label in _headers)
                    Style('px-3 py-2 whitespace-nowrap', child: Text(label)),
                ],
              ),
            ),
            Style(
              'divide-y divide-gray-200 *:even:bg-gray-50 dark:divide-gray-700 dark:*:even:bg-gray-800',
              children: [
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[0])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[1])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[2])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[3])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[4])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Sticky headings

Section titled “Sticky headings”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class Tables4Example extends StatelessWidget {
  const Tables4Example({super.key});


  static const _headers = ['Name', 'DoB', 'Role', 'Salary'];


  static const _rows = <List<String>>[
    ['Nandor the Relentless', '04/06/1262', 'Vampire Warrior', r'$0'],
    ['Laszlo Cravensworth', '19/10/1678', 'Vampire Gentleman', r'$0'],
    ['Nadja', '15/03/1593', 'Vampire Seductress', r'$0'],
    ['Colin Robinson', '01/09/1971', 'Energy Vampire', r'$53,000'],
    ['Guillermo de la Cruz', '18/11/1991', 'Familiar/Vampire Hunter', r'$0'],
  ];


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'max-h-46 overflow-x-auto',
        child: Style(
          'min-w-full divide-y-2 divide-gray-200 dark:divide-gray-700',
          children: [
            Style(
              'sticky top-0 bg-white ltr:text-left rtl:text-right dark:bg-gray-900',
              child: Style(
                '*:font-medium *:text-gray-900 dark:*:text-white',
                children: [
                  for (final label in _headers)
                    Style('px-3 py-2 whitespace-nowrap', child: Text(label)),
                ],
              ),
            ),
            Style(
              'divide-y divide-gray-200 dark:divide-gray-700',
              children: [
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[0])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[1])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[2])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[3])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:font-medium dark:*:text-white',
                  children: [
                    for (final cell in _rows[4])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Sticky first column

Section titled “Sticky first column”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class Tables5Example extends StatelessWidget {
  const Tables5Example({super.key});


  static const _headers = ['Name', 'DoB', 'Role', 'Salary'];


  static const _rows = <List<String>>[
    ['Nandor the Relentless', '04/06/1262', 'Vampire Warrior', r'$0'],
    ['Laszlo Cravensworth', '19/10/1678', 'Vampire Gentleman', r'$0'],
    ['Nadja', '15/03/1593', 'Vampire Seductress', r'$0'],
    ['Colin Robinson', '01/09/1971', 'Energy Vampire', r'$53,000'],
    ['Guillermo de la Cruz', '18/11/1991', 'Familiar/Vampire Hunter', r'$0'],
  ];


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'overflow-x-auto',
        child: Style(
          'min-w-full divide-y-2 divide-gray-200 dark:divide-gray-700',
          children: [
            Style(
              'ltr:text-left rtl:text-right',
              child: Style(
                '*:font-medium *:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white dark:*:text-white dark:*:first:bg-gray-900',
                children: [
                  for (final label in _headers)
                    Style('px-3 py-2 whitespace-nowrap', child: Text(label)),
                ],
              ),
            ),
            Style(
              'divide-y divide-gray-200 dark:divide-gray-700',
              children: [
                Style(
                  '*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium dark:*:text-white dark:*:first:bg-gray-900',
                  children: [
                    for (final cell in _rows[0])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium dark:*:text-white dark:*:first:bg-gray-900',
                  children: [
                    for (final cell in _rows[1])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium dark:*:text-white dark:*:first:bg-gray-900',
                  children: [
                    for (final cell in _rows[2])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium dark:*:text-white dark:*:first:bg-gray-900',
                  children: [
                    for (final cell in _rows[3])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
                Style(
                  '*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium dark:*:text-white dark:*:first:bg-gray-900',
                  children: [
                    for (final cell in _rows[4])
                      Style('px-3 py-2 whitespace-nowrap', child: Text(cell)),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}