Elements

Most layout components will hand over the element rendering to the user. This is done via the renderElement prop on columns, data, timeframes, markers.

The type for all the renderElement props defines the render function

export type ElementPosition = {
  left: number;
  top: number;
  width: number;
  height: number;
};

export type RenderElement = ({
  elementPosition,
}: {
  elementPosition: ElementPosition;
}) => JSX.Element;

This means a inline function or a React Component function can be used

const IdCol: RenderElement = ({ elementPosition }): JSX.Element => {
  return <CellElement elementPosition={elementPosition}>ID</CellElement>;
};

const columns: TableColumns[] = [
  {
    id: "id",
    renderElement: IdCol,
    width: 50,
  },
  {
    id: "name",
    renderElement: ({ elementPosition }) => (
      <CellElement elementPosition={elementPosition}>Name</CellElement>
    ),
    width: 200,
  },
];

The elementPosition object contains the position and size of the parent div.

Special Render Elements

There are two special props for render elements

• expandCollapseElement
• dateTimeframeRenderElements

Both of these will provide additional things in the callback and expect a normal renderElement callback as a return value.

expandCollapseElement

Provides expand: boolean and onClick: () => void to render an expand/collapse button and handle the onClick event.

        expandCollapseElement={(expand, onClick) => () => (
          <CellElement>
            <button
              className="flex size-4 items-center justify-center rounded-md bg-[var(--sl-color-bg-nav)]"
              onClick={onClick}
            >
              {expand ? "+" : "-"}
            </button>
          </CellElement>
        )}

dateTimeframeRenderElements

Requires an object for specifying Month and Day element renderElement functions for the timeline header section. Provides date info in the callbacks.

        dateTimeframeRenderElements={{
          day: (_year, _monthIndex, day) => () => (
            <CellElement>{day}</CellElement>
          ),
          month: (year, monthIndex) => () => (
            <CellElement>
              {year}-{monthIndex + 1}
            </CellElement>
          ),
        }}

Element

If no html elements are required, a simple React.Fragment can be returned to wrap values

const columns = [
  {
    id: "name",
    renderElement: () => <>Name</>,
    width: 200,
  },
];