menu

Tables

Guidelines:

Name Address City State Zip
Lulu McCormick 2591 Rylee Turnpike Brooklyn NY 35273 edit
Elijah Phelps 3919 Hartmann Vista Suite 501 Brooklyn NY 35273 edit
Michael Jimenez 699 Jeremy Fork Brooklyn NY 35273 edit
1-11 of 300
chevron_left chevron_right
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
Name Address City State Zip
Lulu McCormick 2591 Rylee Turnpike Brooklyn NY 35273
Elijah Phelps 3919 Hartmann Vista Suite 501 Brooklyn NY 35273
Michael Jimenez 699 Jeremy Fork Brooklyn NY 35273

React Tables

Props for Table:

  • Required: columns: Array of column objects (one for each column)
  • Required: dataSource: Array of record objects (one for each row in the table)
  • Required: rowKey: String, attribute that each record responds to, to be used as the each TableRow's key (defaults to key)
  • Optional: rowClassName: Function that takes a record and returns a className (String) to add to a TableRow
  • Required: Each column definition should include either a) dataIndex (attribute to call on each record) or a b) render function (to be called on the record)
  • Props for columns:

    • Required: key: String
    • Required: title: String
    • Optional: textAlign: String
    • Optional: colSpan: Number (Out of 12-width grid)
    • Optional: reverse: Boolean (Sort is reversed or sort not reversed)
    • Optional: sortUrl: String (Link to add to Column Title)
    • Optional: sorted: Boolean
    • Required or dataIndex required: render: Function
    • Required or render required: dataIndex: String

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 };