Skip to content

shafqatalix/css-grid-reactjs

Repository files navigation

CSS-Grid-ReactJS

React layout component based on CSS Grid Spec

Build Status

Storybook Examples

API Styleguide

Code Sandbox Example

npm i css-grid-reactjs
or
yarn add css-grid-reactjs
import { HeaderRow, HeaderCell, Cell, Grid, Row } from "css-grid-reactjs";
import "css-grid-reactjs/dist/lib.css";

const onSort = (field: string) => {
    console.log(`onSort has been called for data-field:${field}`);
};

<Grid>
    <HeaderRow>
        <HeaderCell onSort={onSort} dataField="name">
            Name
        </HeaderCell>
        <HeaderCell dataField="address">Address</HeaderCell>
    </HeaderRow>
    <Row>
        <Cell>John Doe</Cell>
        <Cell>23 Randolph St</Cell>
    </Row>
    <Row>
        <Cell>Dexter White</Cell>
        <Cell>918 Windsor Avenue</Cell>
    </Row>
</Grid>;

Features

  • Typescript support.
  • No media queries, purely based on css-grid spec.
  • Fully declarative.
  • Simple and liner API.
  • Responsive by default without any additional css.
  • Allows Fixed size gird with scrollbar on content overflow.
  • Allow full customization of styles.
  • Supports up to 30 grid columns without distorting UI.

TODO

  • Improve Docs & Examples.
  • Pagination component.
  • Add unit-tests.

Browser Support

See http://caniuse.com/#feat=css-grid

Related

MIT License