PalmyraGrid#

@palmyralabs/rt-forms-mui · grid/PalmyraGrid.tsx

Overview#

Server-backed grid. Wraps the MUI package’s GridX (toolbar + table + pagination wiring) and exposes a pub-sub topic so other parts of the app can refresh or refilter the grid without holding its ref.

Props — `PalmyraGridOptions<ControlPropsType>`#

Declared locally in this package (grid/types.ts). Common props:

Prop	Type	Purpose
`columns`	`ColumnDefinition[]`	Column defs
`endPoint`	`IEndPoint`	Wire endpoint path
`storeOptions`	`StoreOptions?`	Forwarded to the store factory
`pageSize`	`number \| number[]?`	Options for the page-size selector
`topic`	`string?`	Base topic name for the external bus
`DataGridControls`	`ComponentType<ControlPropsType>?`	Toolbar / row-action component
`controlProps`	`ControlPropsType?`	Props forwarded to the controls component
`initParams`	`{ filter?, sort?, limit?, offset? }?`	Initial query state

Topic bus#

When topic = 'manufacturer':

Channel	Direction	Payload
`manufacturer/refresh`	in	— calls `queryRef.current.refresh()`
`manufacturer/filter`	in	`filter` object — replaces current filter
`manufacturer/data`	out	emitted after each data-change

Publish from anywhere with @palmyralabs/ts-utils’ topic:

import { topic } from '@palmyralabs/ts-utils';
topic.publish('manufacturer/refresh', {});
topic.publish('manufacturer/filter', { status: 'ACTIVE' });

Ref — `IPalmyraGrid`#

Local to this package; extends IPageQueryable from @palmyralabs/rt-forms.

Example#

import { PalmyraGrid } from '@palmyralabs/rt-forms-mui';
import { manufacturerColumns } from './columns';

export function ManufacturerGrid() {
  return (
    <PalmyraGrid
      topic="manufacturer"
      columns={manufacturerColumns}
      endPoint="/mstManufacturer"
      pageSize={[15, 30, 45]}
      initParams={{ sort: ['-id'], limit: 15, offset: 0 }}
    />
  );
}