React Flex Table

Features

• ES6/ESNext - Write ES6 code and Babel will transpile it to ES5 for backwards compatibility
• Test - Jest
• Lint - Preconfigured ESlint with Airbnb config
• Minify - Built code will be not be minified, this allows for easier testability in your application. Make sure to minify your application for best performance.
• Styled Components - Built using styled components with flexibility to allow you to customize them to meet your needs. Just pass styles and classes as normal props.
• React Hooks - Built using react hooks.

Components

• <FlexTable> - Outer table container
• <FlexHeader> - Acts like a row but removes row clickable events and adds header styling by default
• <FlexFooter> - Acts like a row but removes row clickable events
• <FlexRow> - Table Row container
• <FlexItem> - Table item container
• <FlexItemExpand> - Same as 'FlexItem' but is hidden by default until expanded (done so by clicking on any FlexRow item)

Example

<FlexTable>
  <FlexHeader>
    <FlexItem>
      ID
    </FlexItem>
    <FlexItem>
      Company
    </FlexItem>
  </FlexHeader>

  <FlexRow>
    <FlexItem>
      fd3gt-1der
    </FlexItem>
    <FlexItem>
      Nixtus
    </FlexItem>
    <FlexItemExpand>
      <!-- THIS WILL BE HIDDEN BY DEFAULT, THEN EXPANDED VISIBLE WHEN FlexRow IS CLICKED -->
      <h1>Company Details</h1>
    </FlexItemExpand>
  </FlexRow>

  <FlexFooter>
    <FlexItem>
      $copy; Nixtus
    </FlexItem>
  </FlexFooter>
</FlexTable>

License

MIT © Andrew Ninneman MIT © Nixtus LLC