PageTable

The PageTable component is for adding a table to a page.

<PageLayout>
  <PageHeader ... />
  <PageTable
    tableColumns={ ... }
    toolbarFilters={ ... }
    toolbarActions={ ... }
    rowActions={ ... }
    {...view}
  />
</PageLayout>

Prop	Type	Description
tableColumns	ITableColumn[]	The columns for the table.
toolbarFilters	IToolbarFilter[]	The filters for the table, shown in the toolbar.
toolbarActions	IPageAction[]	The actions for the table, shown in the toolbar.
rowActions	IPageAction[]	The actions for the items in the rows of the table.

There are many more props to the table, but most of them are handled by the view.

View

Each table uses a view using a React hook. The view handles the state for the table. Sorting, filtering, pagination, etc...

const view = useView();

For different backends, the view can be wrapped to make a specific view hook for the API.

export function Users() {
  const view = useMyApiView<IUser>({ url: '/api/users' })
  ...
}

Table Columns

export function Users() {
  const view = useMyApiView<IUser>({ url: '/api/users' })
  const tableColumns = useMemo<ITableColumn<IUser>[]>(
    () => [
      {
        header: 'Name',
        cell: (user) => <TextCell text={user.name} />,
        sort: 'name',
      },
    ],
    []
  )
  ...
}

Page Table

The PageTable component takes in the properties from the view and shows a table for the view using the columns.

export function Users() {
  const view = useMyApiView<IUser>({ url: '/api/users' });
  const tableColumns = useMemo<ITableColumn<IUser>[]>(
    () => [
      {
        header: 'Name',
        cell: (user) => <TextCell text={user.name} />,
        sort: 'name',
      },
    ],
    []
  );
  return (
    <PageLayout>
      <PageHeader title="Users" />
      <PageBody>
        <PageTable<IUser> tableColumns={tableColumns} {...view} />
      </PageBody>
    </PageLayout>
  );
}

Toolbar Filters

Filters are specified using IToolbarFilter. The key is used for url querystring persistence. The query is used by the view to make the API call with the filter.

export function Users() {
  const view = useMyApiView<IUser>({ url: '/api/users' })
  const tableColumns = ...
  const toolbarFilters = useMemo<IToolbarFilter[]>(
    () => [
      {
        key: 'name',
        label: 'Name',
        type: 'string',
        query: 'name',
      },
    ],
    []
  )
  return (
    <PageLayout>
      <PageHeader title="Users" />
      <PageBody>
        <PageTable<IUser>
          tableColumns={tableColumns}
          toolbarFilters={toolbarFilters}
          {...view} />
      </PageBody>
    </PageLayout>
  )
}

Toolbar Actions

Toolbar actions are specified using IPageAction.

export function Users() {
  const view = useMyApiView<IUser>({ url: '/api/users' })
  const tableColumns = ...
  const toolbarFilters = ...
  const toolbarActions = useMemo<IPageAction<IUser>[]>(
    () => [
      {
        type: TypedActionType.button,
        variant: ButtonVariant.primary,
        icon: PlusIcon,
        label: 'Create user',
        onClick: () => alert("TODO"),
      },
      {
        type: TypedActionType.bulk,
        icon: TrashIcon,
        label: 'Deleted selected users',
        onClick: (users) => alert("TODO"),
      },
    ],
    []
  )
  return (
    <PageLayout>
      <PageHeader title="Users" />
      <PageBody>
        <PageTable<IUser>
          tableColumns={tableColumns}
          toolbarFilters={toolbarFilters}
          toolbarActions={toolbarActions}
          {...view} />
      </PageBody>
    </PageLayout>
  )
}

Row Actions

Row actions are specified using IPageAction.

export function Users() {
  const view = useMyApiView<IUser>({ url: '/api/users' })
  const tableColumns = ...
  const toolbarFilters = ...
  const toolbarActions = ...
  const rowActions = useMemo<IPageAction<Team>[]>(
    () => [
      {
        icon: EditIcon,
        label: 'Edit user',
        onClick: (user) => alert("TODO"),
      },
    ],
    [t]
  )
  return (
    <PageLayout>
      <PageHeader title="Users" />
      <PageBody>
        <PageTable<IUser>
          tableColumns={tableColumns}
          toolbarFilters={toolbarFilters}
          toolbarActions={toolbarActions}
          rowActions={rowActions}
          {...view} />
      </PageBody>
    </PageLayout>
  )
}