Dyvix Table

DyvixTable is an animated, headless table engine that supports both themed and unstyled rendering modes. It supports two usage patterns:

• Config-driven mode for rendering tables from structured data.
• Composable mode for building fully custom table layouts using sub-components.

Attributes

• columns
  • : Array<{key: string, label: string, sortable?: boolean}>. Defines the table's column structure for config-driven mode. Each object requires a unique key matching the corresponding data property, and a label for display.
• data
  • : Array<Object>. Row data for config-driven mode. Each object's keys must match the key values defined in columns.
• children
  • : ReactNode. Used in composable mode to manually build the table using DyvixTableHeader, DyvixTableBody, DyvixTableRow, DyvixTableHead, and DyvixTableCell.
• overrides
  • : Record<string, string | number>. An object of typed CSS Variables allowing deep easy-customization of the component. See table overrides for more information.
• theme
  • : string. Controls the design and feel of the table. See the Themes list for a full list.
• animation
  • : string. Controls the entrance animation of the table. Defaults to fade. See the Animation List for a full list.
• background
  • : string. Controls the table's background color.
• color
  • : string. Controls the table's text color.
• className
  • : string. Contains a custom class for your table, allowing more control for the developer.
• style
  • : Object. Inline style overrides applied to the table.
• timeline
  • : function. A GSAP callback function that allows an external gsap.timeline() instance to control the component's internal animations.

Sub-components

Used exclusively in composable mode:

• DyvixTableHeader
  • : Wraps the table's header rows. Renders as <thead>.
• DyvixTableBody
  • : Wraps the table's body rows. Renders as <tbody>.
• DyvixTableRow
  • : Represents a single row. Renders as <tr>.
• DyvixTableHead
  • : Represents a header cell. Renders as <th>.
• DyvixTableCell
  • : Represents a body cell. Renders as <td>.

Table Sorting

Dyvix Table supports multi-column sorting by setting sortable: true within your table column configuration.

import { DyvixTable } from 'dyvix-ui';

function TableSortingExample() {
  return (
    <DyvixTable
      columns={[
        { key: 'id', label: 'ID', sortable: true },
        { key: 'name', label: 'Name' },
        { key: 'age', label: 'Age', sortable: true }
      ]}
      data={[
        { id: 2, name: 'David', age: 30 },
        { id: 1, name: 'John', age: 50 }
      ]}
    />
  );
}

NOTE

Sorting is only supported in Config-driven mode.

Example

Config-driven mode

import { DyvixTable } from 'dyvix-ui';

function TableExample() {
  return (
    <DyvixTable
      theme="Crimson"
      animation="drift"
      columns={[
        { key: 'id', label: 'ID' },
        { key: 'name', label: 'Name' },
        { key: 'type', label: 'Type' }
      ]}
      data={[
        { id: 1, name: 'Lion', type: 'Wild' },
        { id: 2, name: 'Wolf', type: 'Wild' }
      ]}
    />
  );
}

Composable mode

import {
  DyvixTable,
  DyvixTableHeader,
  DyvixTableBody,
  DyvixTableRow,
  DyvixTableHead,
  DyvixTableCell
} from 'dyvix-ui';

function TableExample() {
  return (
    <DyvixTable theme="Crimson">
      <DyvixTableHeader>
        <DyvixTableRow>
          <DyvixTableHead>ID</DyvixTableHead>
          <DyvixTableHead>Name</DyvixTableHead>
          <DyvixTableHead>Type</DyvixTableHead>
        </DyvixTableRow>
      </DyvixTableHeader>
      <DyvixTableBody>
        <DyvixTableRow>
          <DyvixTableCell>1</DyvixTableCell>
          <DyvixTableCell>Lion</DyvixTableCell>
          <DyvixTableCell>Wild</DyvixTableCell>
        </DyvixTableRow>
        <DyvixTableRow>
          <DyvixTableCell>2</DyvixTableCell>
          <DyvixTableCell>Wolf</DyvixTableCell>
          <DyvixTableCell>Wild</DyvixTableCell>
        </DyvixTableRow>
      </DyvixTableBody>
    </DyvixTable>
  );
}