How to use the @patternfly/react-table.cellWidth function in @patternfly/react-table

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: [
          <>
            Workload}>
              WS
            
            {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 3scale / porta / portafly / src / components / pages / applications / utils / applicationsTableDataFactory.tsx View on Github external
const generateColumns: DataListColumnGenerator = (t: TFunction) => [
  {
    categoryName: 'name',
    title: t('applicationsIndex:applications_table.name_header'),
    transforms: [sortable, cellWidth(20)]
  },
  {
    categoryName: 'account',
    title: t('applicationsIndex:applications_table.account_header'),
    transforms: [sortable, cellWidth(20)]
  },
  {
    categoryName: 'plan',
    title: t('applicationsIndex:applications_table.plan_header'),
    transforms: [sortable, cellWidth(30)]
  },
  {
    categoryName: 'created_on',
    title: t('applicationsIndex:applications_table.created_header'),
    transforms: [sortable, cellWidth(15)]
  },
  {
    categoryName: 'state',
    title: t('applicationsIndex:applications_table.state_header'),
    transforms: [sortable, cellWidth(15)]
  }
github apache / qpid-dispatch / console / react / src / details / updateTablePage.js View on Github external
this.props.location.state.entity);

    if (!this.entity) {
      this.state.redirect = true;
    } else {
      this.dataSource = !detailsDataMap[this.entity]
        ? new defaultData(this.props.service, this.props.schema)
        : new detailsDataMap[this.entity](
          this.props.service,
          this.props.schema
        );
    }

    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(),
      changes: false,
      record: this.props.locationState.currentRecord
    };
    this.originalRecord = utils.copy(this.state.record);
  }