@nixtus/react-flextable NPM

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>