DataViewContainer

The top-level container for list pages. Composes a view-mode toggle (table ↔ cards) and pagination in a single component. Delegates the actual data rendering to TableView or CardView.

📖 Storybook

Preview

Live preview↗ Open in Storybook

Import

import { DataViewContainer } from "@xocialive/ui-components";
import type { ColumnConfig, ActionConfig, PaginationInfo } from "@xocialive/ui-components/components";

Basic usage

src/modules/items/components/ItemsTable.tsx

import React from "react";
import { DataViewContainer } from "@xocialive/ui-components";
import type { ColumnConfig, ActionConfig, PaginationInfo } from "@xocialive/ui-components/components";
import { Chip } from "@mui/material";
import EditIcon from "@mui/icons-material/Edit";
import DeleteIcon from "@mui/icons-material/Delete";

interface Item {
  id: number;
  name: string;
  active: boolean;
}

const columns: ColumnConfig<Item>[] = [
  {
    key: "name",
    label: t("items.name"),
    sortable: true,
    render: (value) => value || "-",
  },
  {
    key: "active",
    label: t("items.status"),
    render: (value) => (
      <Chip
        color={value ? "success" : "default"}
        label={value ? t("common.active") : t("common.inactive")}
        size="small"
      />
    ),
  },
];

const actions: ActionConfig<Item>[] = [
  {
    label: t("common.edit"),
    icon: <EditIcon />,
    color: "primary",
    onClick: (item) => navigate(`/items/${item.id}/edit`),
  },
  {
    label: t("common.delete"),
    icon: <DeleteIcon />,
    color: "error",
    onClick: (item) => handleDelete(item),
    show: (item) => item.active,
  },
];

interface ItemsTableProps {
  data: Item[];
  isLoading: boolean;
  error: any;
  paginationInfo: PaginationInfo;
  onPageChange: (page: number) => void;
  onRowsPerPageChange: (rows: number) => void;
}

const ItemsTable: React.FC<ItemsTableProps> = ({
  data,
  isLoading,
  error,
  paginationInfo,
  onPageChange,
  onRowsPerPageChange,
}) => {
  return (
    <DataViewContainer<Item>
      data={data}
      columns={columns}
      actions={actions}
      isLoading={isLoading}
      error={error}
      paginationInfo={paginationInfo}
      onPageChange={onPageChange}
      onRowsPerPageChange={onRowsPerPageChange}
      rowsPerPageOptions={[10, 25, 50]}
      enableViewToggle
      defaultView="table"
      cardTitleField="name"
      textOverrides={{
        noDataMessage: t("items.noItems"),
        actions: t("common.actions"),
      }}
    />
  );
};

export default ItemsTable;

Props

Prop	Type	Default	Description
data	T[]	—	Row/card data array
columns	ColumnConfig<T>[]	—	Column definitions for the table view
actions	ActionConfig<T>[]	[]	Row action buttons
isLoading	boolean	false	Shows a spinner via DataContainer
error	any	—	RTK Query error — shows an alert via DataContainer
paginationInfo	PaginationInfo	—	{ totalCount, pageSize, pageIndex }
onPageChange	(page: number) => void	—	Called when the user changes the page
onRowsPerPageChange	(rows: number) => void	—	Called when the user changes the page size
rowsPerPageOptions	number[]	—	Available page-size options
addButton	ReactNode	—	"Add" button rendered in the container header
enableViewToggle	boolean	false	Shows the table/card toggle control
defaultView	"table" | "card"	"table"	Initial view mode
cardTitleField	string	—	Field key used as the card title in card view
cardSubtitleField	string	—	Field key used as the card subtitle in card view
keyField	string	"id"	Field used as the React row key
textOverrides	object	—	{ actions?, noDataMessage? }

PaginationInfo

interface PaginationInfo {
  totalCount: number;
  pageSize: number;
  pageIndex: number;
}

ColumnConfig<T>

interface ColumnConfig<T> {
  key: string;
  label: string;
  sortable?: boolean;
  width?: string | number;
  maxWidth?: string | number;
  minWidth?: string | number;
  align?: "left" | "center" | "right";
  render?: (value: any, item: T) => ReactNode;
  hideInTable?: boolean;
}

ActionConfig<T>

interface ActionConfig<T> {
  label: string | ((item: T) => string);
  icon: ReactNode;
  color?: "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
  onClick: (item: T) => void;
  show?: (item: T) => boolean;
  disabled?: (item: T) => boolean;
}

See also

• TableView — standalone table without pagination or view toggle
• CardView — standalone card grid