Data Table

The Data Table component provides a powerful way to display and interact with tabular data, featuring row selection, expansion, sorting, and custom cell rendering. Built on TanStack Table, it offers a comprehensive solution for complex data display needs.

Anatomy

<DataTable
  columns={columns} // Column definitions
  data={data} // Data to display
  size="normal" // Size variant
  getRowId={(row) => row.id} // Function to get unique row ID
  enableRowSelection // Enable row selection
  enableExpanding // Enable row expansion
  renderSubComponent={renderSubComponent} // Render expanded content
  currentSorting={sorting} // Current sorting state
  onSortingChange={setSorting} // Sorting change handler
  pagination={paginationProps} // Pagination configuration
/>

Usage

import { DataTable } from "@harnessio/ui/components";
import { useState } from "react";
import type {
  ColumnDef,
  SortingState,
  RowSelectionState,
  ExpandedState,
} from "@tanstack/react-table";

// Define your data type
type User = {
  name: string;
  email: string;
  status: "active" | "inactive";
};

// Define your columns
const columns: ColumnDef<User>[] = [
  {
    accessorKey: "name",
    header: "Name",
    enableSorting: true,
  },
  {
    accessorKey: "email",
    header: "Email",
  },
  {
    accessorKey: "status",
    header: "Status",
  },
];

function MyTable() {
  // State for sorting, selection, and expansion
  const [sorting, setSorting] = useState<SortingState>([]);
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
  const [expanded, setExpanded] = useState<ExpandedState>({});

  // Your data
  const data = [
    { name: "John Doe", email: "john@example.com", status: "active" },
    { name: "Jane Smith", email: "jane@example.com", status: "inactive" },
  ];

  return (
    <DataTable
      columns={columns}
      data={data}
      getRowId={(row) => row.email}
      currentSorting={sorting}
      onSortingChange={setSorting}
      enableRowSelection
      currentRowSelection={rowSelection}
      onRowSelectionChange={setRowSelection}
      enableExpanding
      currentExpanded={expanded}
      onExpandedChange={setExpanded}
      renderSubComponent={({ row }) => (
        <div className="p-4">
          <p>Additional details for {row.original.name}</p>
        </div>
      )}
    />
  );
}

Props

Prop	Required	Default	Type
data	true		TData[]
columns	true		ColumnDef<TData, unknown>[]
size	false	'normal'	'normal' | 'relaxed' | 'compact'
getRowId	false		(row: TData) => string
pagination	false		PaginationProps
getRowClassName	false		(row: Row<TData>) => string | undefined
onRowClick	false		(data: TData, index: number) => void
disableHighlightOnHover	false		boolean
className	false		string
currentSorting	false		SortingState
onSortingChange	false		OnChangeFn<SortingState>
enableRowSelection	false		boolean
currentRowSelection	false		RowSelectionState
onRowSelectionChange	false		OnChangeFn<RowSelectionState>
enableExpanding	false		boolean
getRowCanExpand	false		(row: Row<TData>) => boolean
getRowCanSelect	false		(row: Row<TData>) => boolean
currentExpanded	false		ExpandedState
onExpandedChange	false		OnChangeFn<ExpandedState>
renderSubComponent	false		(props: { row: Row<TData> }) => React.ReactNode
enableColumnResizing	false		boolean

Examples

Table with Custom Cell Rendering

import { DataTable, StatusBadge } from "@harnessio/ui/components";

const columns = [
  {
    accessorKey: "name",
    header: "Name",
  },
  {
    accessorKey: "status",
    header: "Status",
    cell: (info) => (
      <StatusBadge
        theme={info.getValue() === "active" ? "success" : "danger"}
        size="sm"
      >
        {info.getValue()}
      </StatusBadge>
    ),
  },
];

Table with Conditional Row Selection

<DataTable
  columns={columns}
  data={data}
  enableRowSelection
  getRowCanSelect={(row) => row.original.status === "active"}
  currentRowSelection={rowSelection}
  onRowSelectionChange={setRowSelection}
/>