Column Moving

Graphite Grid allows columns to be reordered by dragging the column header. Set the moveable property to true to make a column movable.

In this example, all columns are moveable:

export function ColumnAutosizing() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        { id: "Ticker Symbol", field: 0, moveable: true },
        { id: "Open Price", field: 1, moveable: true },
        { id: "Close Price", field: 2, moveable: true },
        { id: "Volume", field: 3, moveable: true },
        { id: "Market Cap", field: 4, moveable: true },
      ],
      // other grid properties
    },
  });
 
  return (
    <div style={{ height: 300 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}CopyCopied!

Column Move Placeholder

When moving a column, a placeholder is displayed. You can customize the placeholder using the columnMovePlaceholder property.

export function ColumnMovePlaceholder() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        // column definitions if necessary
      ],
      columnMovePlaceholder: (p) => {
        return (
          <div className="border border-solid p-2 bg-indigo-300 dark:bg-indigo-600">
            {p.columns[0].id}
          </div>
        );
      },
      // other grid properties
    },
  });
 
  // Additional logic or return if needed
}CopyCopied!