{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "https://raw.githubusercontent.com/vega/vega-datasets/next/data/penguins.json"
  },
  "params": [
    {
      "name": "page",
      "value": 0,
      "bind": {
        "input": "range",
        "min": 0,
        "max": 30,
        "step": 1,
        "name": "Page:"
      }
    }
  ],
  "transform": [
  { "window": [{ "op": "row_number", "as": "row_num" }] },
  { "calculate": "floor((datum.row_num - 1) / 10)", "as": "page_num" },
  { "filter": "datum.page_num === page" },
  { "calculate": "(datum.row_num - 1) % 10", "as": "row_index" },
  {
    "fold": [
      "Beak Depth (mm)",
      "Beak Length (mm)",
      "Body Mass (g)",
      "Flipper Length (mm)",
      "Island",
      "Species"
    ]
  },
  {
    "calculate": "datum.value === null ? 'null' : datum.value",
    "as": "cell_text"
  }
],
  "width": {"step": 150},
  "height": {"step": 50},
  "layer": [
    {
      "mark": {
        "type": "rect",
        "stroke": "#ccc",
        "fill": "#fff"
      },
      "encoding": {
        "x": {
          "field": "key",
          "type": "nominal",
          "axis": null,
          "scale": { "paddingInner": 0}
        },
        "y": {
          "field": "row_index",
          "type": "ordinal",
          "axis": null
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "fontSize": 12,
        "align": "center",
        "baseline": "middle"
      },
      "encoding": {
        "x": { "field": "key", "type": "nominal" },
        "y": { "field": "row_index", "type": "ordinal" },
        "text": { "field": "cell_text", "type": "nominal" }
      }
    },
    {
      "mark": {
        "type": "text",
        "fontSize": 14,
        "fontWeight": "bold",
        "align": "center",
        "baseline": "bottom",
         "dy": -10

      },
      "encoding": {
        "x": { "field": "key", "type": "nominal" },
        "y": { "value": -1 },
        "text": { "field": "key", "type": "nominal" }
      }
    }
  ],
  "config": {
    "view": { "stroke": "transparent" },
    "axis": { "grid": false, "domain": false, "ticks": false },
    "style": {
      "cell": { "stroke": "#ccc" }
    }
  }
}

I’ve been working on a Vega table over the past few days and explored multiple blogs and documentation sources. Unfortunately, none of them fully met the requirements. However, the solution I’ve shared above delivers a clean, traditional table layout. You can easily customize the pagination according to your needs.
Check the image below to see the result.
enter image description here