react-responsive-cards-table
v0.3.0
Published
Responsive table that automatically switches between table (wide) and card (narrow) views.
Downloads
22
Readme
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
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.