The PfReactTable is a Datatable for React using the Patternfly 4 Framwork.

It is inspired by the jquery datatables as i am not able to get my head around the - far superiour - table implementation by the Patternfly Team.

It is based on the Typescript Patternfly React Seed: https://github.com/patternfly/patternfly-react-seed

This module contains two Usefule components

• AwesomeSimpleTable Needs a column-Definition and the rows and makes pagination, sorting for you.

• PfReactPaginationTable A more flexible component, that still does pagination and displaying things for you, but you will do sorting yourself - the usecase is serverside sorting/pagination.

EXAMPLE

TODO

CSS

To include the single CSS file that has a Single entry, include the css loader in your config.

From webpack-config. In my config it is in webpack.prod.js and webpack.dev.js, but I don't get webpack anyway...

module: { rules: [ { test: /.css$/, include: [ path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules/patternfly'), path.resolve(__dirname, 'node_modules/pfreacttable'), # <<<<----- this line path.resolve(__dirname, 'node_modules/@patternfly/patternfly'), path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css'), path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/base.css'), path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'), path.resolve(__dirname, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'), path.resolve(__dirname, 'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css'), path.resolve(__dirname, 'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css') ], use: ["style-loader", "css-loader"] } ] }

AwesomeSimpleTable.tsx

PfReactPaginationTable.tsx