Info Grid

A layout partial for showing entity data

Example

Change Log

4.0.0

• Removes support for auto truncating text content BREAKING

  To migrate, use the new hideOverflow prop to invoke truncating functionality for content

  Before: cell content would auto truncate if text string was longer than cell width

  After:

   <InfoGrid zebraStripe>
      <InfoGridHeader/>
      <InfoRow> 
        <InfoCell hideOverflow label='cell 1'>
          really
          long
          content
          that 
          you
          might
          want
          to
          truncate
        </InfoCell>
      </InfoRow>
    </InfoGrid>
  

3.0.1

• Fixes bug where header styles were not applied due to defaultProp overriding className

3.0.0

• Create new InfoGridHeader component InfoGrid is no longer default export BREAKING

  To migrate import InfoGrid from '@particles/info-grid' becomes import { InfoGrid } from '@particles/info-grid'

• InfoRow and InfoCell are now consumed directly. BREAKING

  InfoGrid no longer accepts prop rows with row/column data

  To migrate implement rows, cells, and header (optional) as children of InfoGrid

  Before

    const rows = [
      [
        { label: 'cell 1': body: 'foo' }
      ],
      [
        { label: 'cell 2': body: 'bar', required: true }
        { label: 'cell 3': body: 'baz' }
      ]
    ];
    
    <InfoGrid rows={rows} zebraStripe />
  

  After

    <InfoGrid zebraStripe>
      <InfoGridHeader/>
      <InfoRow> 
        <InfoCell label='cell 1'>foo</InfoCell>
      </InfoRow>
      <InfoRow>
        <InfoCell label='cell 2' required>bar</InfoCell>
        <InfoCell label='cell 3'>baz</InfoCell>
      </InfoRow>
    </InfoGrid>
  

• Update styling with core components (changes and removes some classes, no longer accepts stylesheets prop) BREAKING

  To migrate use className prop to pass classes to each component

2.0.0

• InfoGrid now expects an array for each row instead of an object. This was done to support a row with duplicate labels.
• Deprecated requiredKeys and keysToIgnore, now you have to add a ignored and/or required key in the rows you pass in from the client.

1.2.1

• Added parentheses to correct an expression that filters out unwanted keys in info grid.

1.2.0

• Added requiredKeys prop (key listed in this array will have an orange asterisk)

1.1.2

• cellData better fits content to cell, using flex

1.1.1

• Updated webpack, postcss, and babel configs
• Tests now use enzyme v3

1.1.0

• Added testing
• Updated css: cellData now expands to full cell width

1.0.0

• Initial commit