Table New

<SCATableNew :table="table" :order="columnOrderState" :selectable-rows="true"/>

const table = useVueTable({
  data: items,
  columns: cols,
  getCoreRowModel: getCoreRowModel(),
  enableRowSelection: true,
  enableSorting: false,
  enableColumnResizing: false,
  meta: {
    rowClickable: true,
  },
});  

const items = [
  {
    id: 1,
    name: "Roberto",
    email: "roberto@example.com",
    title: "CEO",
    role: "Executive",
    note: "Robert likes Strawberries very much.",
  },
  {
    id: 2,
    name: "Marika",
    email: "marika@example.com",
    title: "COO",
    role: "Executive",
    note: "Marika likes Raspberries very much.",
    children: [
      {
        id: 3,
        name: "Peter",
        email: "peter@example.com",
        children: [
          {
            id: 4,
            name: "Roberto2",
            email: "roberto2@example.com",
            children: [
              {
                id: 6,
                name: "Roberto4",
                email: "roberto4@example.com",
              },
              {
                id: 7,
                name: "Roberto5",
                email: "roberto5@example.com",
                children: [
                  {
                    id: 8,
                    name: "Roberto6",
                    email: "roberto6@example.com",
                  },
                ],
              },
            ],
          },
          {
            id: 5,
            name: "Roberto3",
            email: "roberto3@example.com",
          },
        ],
      },
    ],
  },
];

const cols = [
  columnHelper.accessor((row) => row.name, {
    id: "name",
    header: "Name",
  }),
  columnHelper.accessor((row) => row.email, {
    id: "email",
    header: "Email",
  }),
  columnHelper.accessor((row) => row.title, {
    id: "title",
    header: "Title",
  }),
  columnHelper.accessor((row) => row.role, {
    id: "role",
    header: "Role",
  }),
  columnHelper.accessor((row) => row.note, {
    id: "note",
    header: "Note",
  }),
].map((col) => {
  return {
    ...col,
    meta: {
      autoSize: true,
    },
  };
});

Hierarchy

<SCATableNew
  :table="table"
  :order="columnOrderState"
  :selectable-rows="true"
  :hierarchical="true"
/>

const table = useVueTable({
  data: items,
  columns: cols,
  getCoreRowModel: getCoreRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
  getRowId: (row) => row.id,
  getSubRows: (originalRow) => {
    return originalRow.children;
  },
  enableRowSelection: true,
  enableSorting: false,
  enableColumnResizing: false,
  manualExpanding: true,
  meta: {
    rowClickable: true,
  },
  paginateExpandedRows: false,
});

Sortable

<SCATableNew :table="table" :order="columnOrderState" :selectable-rows="true"/>

const table = useVueTable({
  data: items,
  columns: cols,
  getCoreRowModel: getCoreRowModel(),
  enableRowSelection: true,
  enableSorting: true,
  enableColumnResizing: false,
  enableMultiSort: false,
  manualSorting: true,
  meta: {
    rowClickable: true,
  },
});

Column Resizing

<SCATableNew :table="table" :order="columnOrderState" :selectable-rows="true"/>

const table = useVueTable({
  data: items,
  columns: cols,
  getCoreRowModel: getCoreRowModel(),
  columnResizeMode: "onChange",
  enableColumnResizing: true,
  enableRowSelection: true,
  enableSorting: false,
  meta: {
    rowClickable: true,
  },
});

const cols = [
  columnHelper.accessor((row) => row.name, {
    id: "name",
    header: "Name",
  }),
  columnHelper.accessor((row) => row.email, {
    id: "email",
    header: "Email",
  }),
].map((col) => {
  return {
    ...col,
    meta: {
      autoSize: false,
    },
  };
});

Search / Filter

<SCATableNew
  :table="table"
  :order="columnOrderState"
  :selectable-rows="true"
  :show-filter-row="true"
/>

Hide Header

<SCATableNew
  :table="table"
  :order="columnOrderState"
  :selectable-rows="true"
  :hide-header="true"
/>

Loading

<SCATableNew
  :table="table"
  :order="columnOrderState"
  :selectable-rows="true"
  :loading="true"
/>