react-table-px-styles

Unofficial Predix-Styled react-table styles and custom components

Purpose

This project contains a style sheet and custom components to style react-table as defined by the Predix Design System for React based web applications. Styles are based on the Predix UI paginated datagrid component.

Usage

Install this package.

// npm
npm install react-table-px-styles

// yarn
yarn add react-table-px-styles

Import the styles from this package after importing the default react-table CSS styles.

// JS (Webpack)
import 'react-table/react-table.css';
import 'react-table-px-styles/react-table.css';

// Old-school
<link rel="stylesheet" href="node_modules/react-table/react-table.css">
<link rel="stylesheet" href="node_modules/react-table-px-styles/react-table.css">

Import the custom paginator component if a paginated table is required.

import { PxReactTablePagination } from 'react-table-px-styles';

Pass the custom paginator into the React Table.

<ReactTable
    ...
    PaginationComponent={PxReactTablePagination}
    .../>

License

See LICENSE.md for details