Tables

Guidelines:

• Table Title should be Header3
• Table Header Row text and icons should be vertically centered
• Table headers that perform no action are by default colored grey-base. Table headers that perform an action, like sorting, should be colored grey-darken-4 or you can add the 'action' class on the th.

Responsive Tables

The first option is to copy the same responsive approach that is taken with lists where columns are removed based on width. The other approach is to set a minimum width on the table as shown here which will allow the table to scroll in its container.

.md-table .table
  min-width: 690px

new N2Styles.searchBar({safeContainer: '.js-table-search', showSelector: '.show-table-search'});

.card.md-table
  %nav.navbar.n2-navbar.md-table-heading.js-table-search.px-3
    %h3.mb-0.pl-0.col.header Address List
    %h3.mb-0.selection-count.blue-text
    .col
      = form_tag "/toolbar", class: "d-flex n2-search-bar has-black-text hidden grey lighten-3", method: :get do
        %button.d-flex.p-0.btn-flat.with-icon.cursor-pointer{ type: :submit }
          %i.material-icons.black-text search
        = text_field_tag :search, placeholder: "Search", autofocus: true, required: true
        %i.material-icons.hidden.empty-search-input close
    %i.material-icons.pl-3.cursor-pointer.collection-action.hidden delete
    %i.material-icons.pl-3.cursor-pointer.table-action.show-table-search search
    %i.material-icons.pl-3.cursor-pointer.table-action add
    %a.dropdown-button.pl-3.table-action.collection-action.d-flex{ "data-activates" => "dropdown1", href: "#" }
      %i.material-icons more_vert

    %ul.dropdown-content.dropdown-content-right#dropdown1
      %li
        %a.black-text{ href: "#!" } Upload Address List
      %li
        %a.black-text{ href: "#!" } Export Address List
      %li
        %a.black-text{ href: "#!" } Download Sample

  .table-container
    %table.table
      %thead
        %tr
          %th.multi-select
            %fieldset.form-group
              %input.filled-in.select-all#checkbox1{ type: :checkbox }
              %label{ for: :checkbox1 }
          %th Name
          %th Address
          %th City
          %th State
          %th.number_field Zip
          %th.action.text-right
      %tbody
        %tr
          %td.multi-select
            %fieldset.form-group
              %input.filled-in#checkbox2{ type: :checkbox }
              %label{ for: :checkbox2 }
          %td Lulu McCormick
          %td 2591 Rylee Turnpike
          %td Brooklyn
          %td NY
          %td.number_field 35273
          %td.action.text-right
            %i.material-icons.grey-text.cursor-pointer edit
  .d-flex.pt-2.px-3.pb-3.flex-row
    .col
    .page-count 1-11 of 300
    %i.material-icons.pl-3.cursor-pointer chevron_left
    %i.material-icons.pl-3.cursor-pointer chevron_right

Condensed Tables

Reduce padding to maximize content when a table has many rows or the screen is small.

.md-table .table.table-sm

import React from 'react';
import { Table } from 'n2-styles';

const fullName = person => `${person.firstName} ${person.lastName}`;
const productNames = person => person.products.join(', ');

function TableWithData({ data }) {
  const columns = [{
    title: 'People',
    key: 'name',
    colSpan: 3,
    render: record => <a href={`#something${record.id}`}>{record.firstName}</a>,
    sorted: true,
    reverse: false,
    sortUrl: '#name',
  },
  {
    title: 'Full Name',
    key: 'full-name',
    colSpan: 4,
    render: person => fullName(person),
    sorted: false,
    reverse: false,
  },
  {
    title: 'Title',
    key: 'title',
    colSpan: 2,
    dataIndex: 'title',
    sorted: false,
    reverse: false,
    sortUrl: '#title',
  },
  {
    title: 'Products',
    key: 'product',
    colSpan: 3,
    render: client => productNames(client),
    textAlign: 'right',
    sorted: false,
    reverse: false,
    sortUrl: '#products',
  }];

  return (
    <Table
      columns={columns}
      rowClassName={person => (person.products.includes('HOA') ? '' : 'font-italic')}
      dataSource={data}
      rowKey="id"
    />
  );
}

export { TableWithData };