ListingTable

The primary view component of the CRUD listing. It renders rows fetched from the API inside a <Table>, supports column sorting, row selection, inline editing, and bulk actions. It reads all shared state from ListingContext and delegates per-row actions to ListingActions.

Import


import ListingTable from "@phpcreation/frontend-crud-react-nextjs-bundle/components/Listing/ListingTable";

Props

Prop	Type	Required	Description
`resource`	`string`	Yes	API resource name (e.g. `"invoices"`).
`mainColumns`	`MainColumnsListing[]`	Yes	Column definitions — label, field path, type, sortable flag.
`fqcn_bui`	`IFQCN_BUI`	Yes	Fully-qualified component name used for element IDs.
`tenant`	`string`	Yes	Tenant identifier passed down to child actions.
`locale`	`string`	No	Active locale, defaults to `"en"`.
`formInputsEdit`	`FilterField[]`	No	Field definitions used by the inline / quick-edit flow.
`formInputsAdd`	`FilterField[]`	No	Field definitions used by the quick-duplicate flow.
`formInputsShow`	`FilterField[]`	No	Field definitions used by the quick-show modal.
`user`	`User \| null`	No	Authenticated user — controls role-gated action visibility.
`customActions`	`{ key: string; action: ReactNode }[]`	No	Inject custom action buttons into each row’s action set.

ListingTable must be rendered inside a ListingContext provider. Attempting to use it standalone will throw a context error.

Column Definition


interface MainColumnsListing {
  key: string;           // dot-path into the row object, e.g. "status.title"
  title: string;         // column header label (translated)
  type: ColumnTypeEnum;  // controls how the cell value is rendered
  sortable?: boolean;    // enables click-to-sort on the header
  className?: string;
}

Usage

Basic


import ListingTable from "@phpcreation/frontend-crud-react-nextjs-bundle/components/Listing/ListingTable";
import { ColumnTypeEnum } from "@phpcreation/frontend-utils-react-nextjs-bundle/utils/types";
 
const columns = [
  { key: "id",        title: "ID",     type: ColumnTypeEnum.NUMBER, sortable: true },
  { key: "title",     title: "Title",  type: ColumnTypeEnum.TEXT,   sortable: true },
  { key: "createdAt", title: "Created",type: ColumnTypeEnum.DATE,   sortable: true },
];
 
<ListingTable
  resource="invoices"
  mainColumns={columns}
  fqcn_bui={{ Bundle: "BillBundle", Unit: "Invoice", Interface: "listing" }}
  tenant="acme"
  locale="en"
  user={currentUser}
/>

Inline editing is activated when the row is selected and bunchEditing is true in ListingContext, or when a row enters inlineEditItem state. Always provide formInputsEdit to support inline saves.