Skip to main content

TableView

A themed MUI Table with column-level sorting and row actions. Handles the "no data" empty state automatically. Use it standalone when you don't need pagination or the view-mode toggle — otherwise use DataViewContainer.

📖 Storybook

Preview​

Live preview↗ Open in Storybook

Import​

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

Basic usage​

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

const columns: ColumnConfig<Item>[] = [
  {
    key: "name",
    label: "Name",
    sortable: true,
    render: (value) => value || "-",
  },
  {
    key: "active",
    label: "Status",
    render: (value) => (
      <Chip color={value ? "success" : "default"} label={value ? "Active" : "Inactive"} size="small" />
    ),
  },
];

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

<TableView<Item>
  data={items}
  columns={columns}
  actions={actions}
  keyField="id"
  textOverrides={{ noDataMessage: "No items found" }}
/>;

Props​

TableView accepts BaseDataViewProps<T>:

PropTypeDefaultDescription
dataT[]—Row data array
columnsColumnConfig<T>[]—Column definitions
actionsActionConfig<T>[][]Row action buttons (up to 3 rendered; extras shown as a +N chip)
isLoadingbooleanfalsePassed through to DataContainer — shows a circular spinner
errorany—Passed through to DataContainer — shows an error alert
onSort(orderBy, order) => void—External sort handler (for server-side sorting)
defaultSortColumnstring—Column to sort by on initial render (client-side)
defaultSortOrder"asc" | "desc""asc"Initial sort direction
keyFieldstring"id"Field used as the React row key
textOverridesobject—{ actions?, noDataMessage? }

ColumnConfig<T>​

interface ColumnConfig<T> {
  key: string; // matches a field on T
  label: string; // column header text
  sortable?: boolean; // shows a sort label
  width?: string | number;
  maxWidth?: string | number;
  minWidth?: string | number;
  align?: "left" | "center" | "right";
  render?: (value: any, item: T) => ReactNode; // custom cell content
  hideInTable?: boolean; // exclude this column from the table
}

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; // hide for specific rows
  disabled?: (item: T) => boolean; // disable for specific rows
}

Row actions are animated on hover. If more than 3 actions are provided the extra ones are hidden until hover and a +N chip is shown.

See also​