Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@patternfly/react-table

Package Overview
Dependencies
Maintainers
0
Versions
2250
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@patternfly/react-table

This library provides a set of React table components for use with the PatternFly 4

  • 6.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

@patternfly/react-table

This package provides Table PatternFly components based on PatternFly

Installing

yarn add @patternfly/react-table

or

npm install @patternfly/react-table --save

Usage

It's strongly advised to use the PatternFly base CSS in your whole project, or some components may diverge in appearance:

import '@patternfly/react-core/dist/styles/base.css';
Example component usage
import { Table, Thead, Tr, Th, Td, Tbody } from '@patternfly/react-table';

export const ComposableTableBasic = () => {
  const repositories = [
    { name: 'one', branches: 'two', prs: 'three' },
    { name: 'one - 2', branches: null, prs: null },
    { name: 'one - 3', branches: 'two - 3', prs: 'three - 3' }
  ];

  const columnNames = {
    name: 'Repositories',
    branches: 'Branches',
    prs: 'Pull requests'
  };
  
  return (
    <Table>
      <Thead>
        <Tr>
          <Th>{columnNames.name}</Th>
          <Th>{columnNames.branches}</Th>
          <Th>{columnNames.prs}</Th>
        </Tr>
      </Thead>
      <Tbody>
        {repositories.map(repo => (
          <Tr key={repo.name}>
            <Td dataLabel={columnNames.name}>{repo.name}</Td>
            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>
            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>
          </Tr>
        ))}
      </Tbody>
    </Table>
  );
}
export default SimpleTable;

Contribution

This library makes use of the babel plugin from @patternfly/react-styles to enable providing the CSS alongside the components. This removes the need for consumers to use (style|css|sass)-loaders. For an example of using CSS from core you can reference Button.js. For any CSS not provided by core please use the StyleSheet.create utility from @patternfly/react-styles. This will prevent collisions with any consumers, and allow the CSS to be bundled with the component.

Documentation

A comprehensive list of components and detailed usage of each can be found on the PatternFly react docs website You can also find how each component is meant to be used from a design perspective on the PatternFly core website.

Note: All commands below assume you are on the root directory in this repository.

Install & run locally

Run to install all the dependencies, build and run the site locally.

yarn install && yarn start

Testing

Testing is done at the root of this repo. To only run the @patternfly/react-table tests:

yarn test packages/react-table

Keywords

FAQs

Package last updated on 24 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc