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

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

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] }
    ];
  }

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 =

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] }
    ];
  }

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] }
    ];
  }

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: [
          <>
            Workload}>
              WS
            
            {route.workload}

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 &&

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 (
            
                
            
        );
    }
}

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 (
            
                
            
        );
    }
}

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;
};