How to use @patternfly/react-table - 10 common examples

To help you get started, we’ve selected a few @patternfly/react-table examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github apache / qpid-dispatch / console / react / src / details / createTablePage.js View on Github external
constructor(props) {
    super(props);
    this.state = {
      columns: [
        { title: "Attribute", transforms: [cellWidth(20)] },
        {
          title: "Value",
          transforms: [cellWidth("max")],
          props: { className: "pf-u-text-align-left" }
        }
      ],
      rows: [],
      redirect: false,
      redirectState: { page: 1 },
      redirectPath: "/dashboard",
      lastUpdated: new Date(),
      record: {},
      errorText: null
    };

    // if we get to this page and we don't have a props.location.state.entity
github kiali / kiali-ui / src / pages / ServiceDetails / ServiceInfo / ServiceInfoWorkload.tsx View on Github external
columns(): ICell[] {
    // TODO: Casting 'as ITransforms' because @patternfly/react-table@2.22.19 has a typing bug. Remove the casting when PF fixes it.
    // https://github.com/patternfly/patternfly-next/issues/2373
    return [
      { title: 'Name', transforms: [cellWidth(10) as any] },
      { title: 'Type', transforms: [cellWidth(10) as any] },
      { title: 'Labels', transforms: [cellWidth(60) as any] },
      { title: 'Created at', transforms: [cellWidth(20) as any] },
      { title: 'Resource version', transforms: [cellWidth(10) as any] }
    ];
  }
github apache / qpid-dispatch / console / react / src / details / detailsTablePage.js View on Github external
constructor(props) {
    super(props);
    this.state = {
      columns: [
        { title: "Attribute", transforms: [cellWidth(20)] },
        {
          title: "Value",
          transforms: [cellWidth("max")],
          props: { className: "pf-u-text-align-left" }
        }
      ],
      rows: [],
      redirect: false,
      redirectState: { page: 1 },
      redirectPath: "/dashboard",
      lastUpdated: new Date()
    };
    // if we get to this page and we don't have a props.location.state.entity
    // then redirect back to the dashboard.
    // this can happen if we get here from a bookmark or browser refresh
    this.entity =
github kiali / kiali-ui / src / pages / ServiceDetails / ServiceInfo / ServiceInfoDestinationRules.tsx View on Github external
columns(): ICell[] {
    // TODO: Casting 'as any' because @patternfly/react-table@2.22.19 has a typing bug. Remove the casting when PF fixes it.
    // https://github.com/patternfly/patternfly-next/issues/2373
    return [
      { title: 'Status' },
      { title: 'Name', transforms: [cellWidth(10) as any] },
      { title: 'Traffic Policy', transforms: [cellWidth(10) as any] },
      { title: 'Subsets', transforms: [cellWidth(30) as any] },
      { title: 'Host', transforms: [cellWidth(10) as any] },
      { title: 'Created at', transforms: [cellWidth(20) as any] },
      { title: 'Resource version', transforms: [cellWidth(10) as any] },
      { title: 'Actions', transforms: [cellWidth(20) as any] }
    ];
  }
github kiali / kiali-ui / src / pages / WorkloadDetails / WorkloadInfo / WorkloadPods.tsx View on Github external
columns(): ICell[] {
    // TODO: Casting 'as any' because @patternfly/react-table@2.22.19 has a typing bug. Remove the casting when PF fixes it.
    // https://github.com/patternfly/patternfly-next/issues/2373
    return [
      { title: 'Status', transforms: [cellWidth(10) as any] },
      { title: 'Name', transforms: [cellWidth(10) as any] },
      { title: 'Created at', transforms: [cellWidth(10) as any] },
      { title: 'Created by', transforms: [cellWidth(10) as any] },
      { title: 'Labels', transforms: [cellWidth(60) as any] },
      { title: 'Istio Init Containers', transforms: [cellWidth(60) as any] },
      { title: 'Istio Containers', transforms: [cellWidth(60) as any] },
      { title: 'Phase', transforms: [cellWidth(10) as any] }
    ];
  }
github kiali / kiali-ui / src / components / IstioWizards / SuspendTraffic.tsx View on Github external
render() {
    // TODO: Casting 'as any' because @patternfly/react-table@2.22.19 has a typing bug. Remove the casting when PF fixes it.
    // https://github.com/patternfly/patternfly-next/issues/2373
    const headerCells: ICell[] = [
      {
        title: 'Workload',
        transforms: [cellWidth(30) as any],
        props: {}
      },
      {
        title: 'Suspended Status',
        transforms: [cellWidth(70) as any],
        props: {}
      }
    ];
    const workloadsRows = this.state.suspendedRoutes.map(route => {
      return {
        cells: [
          <>
            <Tooltip key={'tooltip_' + route.workload} position={TooltipPosition.top} content={<>Workload</>}>
              <Badge className={'virtualitem_badge_definition'}>WS</Badge>
            </Tooltip>
            {route.workload}
github apache / qpid-dispatch / console / react / src / details / detailsTablePage.js View on Github external
constructor(props) {
    super(props);
    this.state = {
      columns: [
        { title: "Attribute", transforms: [cellWidth(20)] },
        {
          title: "Value",
          transforms: [cellWidth("max")],
          props: { className: "pf-u-text-align-left" }
        }
      ],
      rows: [],
      redirect: false,
      redirectState: { page: 1 },
      redirectPath: "/dashboard",
      lastUpdated: new Date()
    };
    // if we get to this page and we don't have a props.location.state.entity
    // then redirect back to the dashboard.
    // this can happen if we get here from a bookmark or browser refresh
    this.entity =
      this.props.entity ||
      (this.props &&
        this.props.location &&
github cockpit-project / cockpit / pkg / storaged / nfs-panel.jsx View on Github external
return;
            cockpit.location.go(["nfs", row.props.entry.fields[0], row.props.entry.fields[1]]);
        }

        // table-hover class is needed till PF4 Table has proper support for clickable rows
        // https://github.com/patternfly/patternfly-react/issues/3267
        return (
            <OptionalPanel className="storage-mounts" id="nfs-mounts"
                       client={client}
                       title={_("NFS Mounts")}
                       actions={actions}
                       feature={nfs_feature}
                       not_installed_text={_("NFS Support not installed")}
                       install_title={_("Install NFS Support")}>
                <ListingTable variant='compact'
                    sortBy={{ index: 0, direction: SortByDirection.asc }}
                    aria-label={_("NFS Mounts")}
                    onRowClick={onRowClick}
                    className='table-hover'
                    emptyCaption={_("No NFS mounts set up")}
                    columns={[
                        { title: _("Server"), transforms: [cellWidth(30)], sortable: true },
                        { title: _("Mount Point"), transforms: [cellWidth(33)], sortable: true },
                        { title:  _("Size"), transforms: [cellWidth(40)] }
                    ]}
                    rows={mounts} />
            </OptionalPanel>
        );
    }
}
github cockpit-project / cockpit / pkg / storaged / fsys-panel.jsx View on Github external
var mounts = Object.keys(client.blocks).filter(is_mount)
                .map(make_mount);

        function onRowClick(event, row) {
            if (!event || event.button !== 0)
                return;
            go_to_block(row.props.client, row.props.path);
        }

        // table-hover class is needed till PF4 Table has proper support for clickable rows
        // https://github.com/patternfly/patternfly-react/issues/3267
        return (
            <OptionalPanel id="mounts" className="storage-mounts"
                title={_("Filesystems")}>
                <ListingTable variant='compact'
                    sortBy={{ index: 0, direction: SortByDirection.asc }}
                    aria-label={_("Filesystems")}
                    className='table-hover'
                    onRowClick={onRowClick}
                    columns={[
                        { title: _("Name"), transforms: [cellWidth(30)], sortable: true },
                        { title: _("Mount Point"), transforms: [cellWidth(30)], sortable: true },
                        { title:  _("Size"), transforms: [cellWidth(40)] }
                    ]}
                    rows={mounts} />
            </OptionalPanel>
        );
    }
}
github syndesisio / syndesis / app / ui-react / packages / ui / src / Data / Virtualizations / Details / VirtualizationDetailHistoryTable.tsx View on Github external
const getColumns = (headers: string[]) => {
  const cols = [
    {
      columnTransforms: [classNames('pf-m-fit-content')], // column sized to heading and data
      title: headers[0],
    },
    {
      columnTransforms: [classNames('pf-m-fit-content')],
      title: headers[1],
    },
    {
      columnTransforms: [classNames('pf-m-width-max')], // column sized to take up remaining space
      title: headers[2],
    },
    {
      columnTransforms: [classNames('pf-m-fit-content')],
      title: headers[3],
    },
  ];
  return cols;
};