react-responsive-cards-table

React Responsive Cards Table

Responsive table that automatically switches between table (wide) and card (narrow) views. It uses javascript to calculate the width of the actual content

Installation

Using yarn:

yarn add react-responsive-cards-table

or npm:

npm i --save react-responsive-cards-table

Example usage

Demo

Demo Source Code

Typical use case would be a table component that will need to collapse into list of cards. Here is basic example of how to do that:

import React from 'react'
import { map } from 'lodash'
import { ResponsiveCardTable, Content } from 'react-responsive-cards-table'

import planets from './planets.json'

const App = () => (
    <ResponsiveCardTable>
      {({ isCard }) => {
        if (isCard) {
          return (
            <Content>
              {map(planets, (planet, i) => (
                <PlanetCard key={i}>
                  ...
                </PlanetCard>
              ))}
            </Content>
          )
        }
    
        return (
          <Content>
            <table>
              <tbody>
                <tr>
                ...
                </tr>
                {map(planets, (planet, i) => (
                  <tr key={i}>
                  ...
                  </tr>
                ))}
              </tbody>
            </table>
          </Content>
        )
      }}
    </ResponsiveCardTable>
)

export default App

API

Both Content and Container components expose styles property that will override default styles.