Set custom columns order

[cafadev]

Describe

The table columns order is auto infer from a form passed as parameter. Currently, we can modify the columns order by modifying the form fields order, but in many cases this could be a problem. Let's say we want to have a form fields in a specific order and then the tables columns in a different order. We can make a workaround to fix this, but it could be tedious.

Propose

Add a columnsOrder property to specify the table columns order.

<script lang="ts" setup>
const form = useForm({
  fields: {
    id: {
      type: FieldType.text,
      label: 'First name',
    },
    firstName: {
      type: FieldType.text,
      label: 'First name',
    },
    lastName: {
      type: FieldType.text,
      label: 'Gender',
    },
    age: {
      type: FieldType.text,
      label: 'Age',
    },
    gender: {
      type: FieldType.text,
      label: 'Gender',
    },
    birthdate: {
      type: FieldType.text,
      label: 'Gender',
    },
    role: {
      type: FieldType.text,
      label: 'Gender',
    },
    department: {
      type: FieldType.text,
      label: 'Gender',
    },
    country: {
      type: FieldType.text,
      label: 'Gender',
    },
  },
  // other settings...
})

// The original columns order is:
// ['id', 'firstName', 'lastName', 'age', 'gender', 'birthdate', 'role', 'department', 'country']

// The columns order that we want to display is:
// ['firstName', 'lastName', 'Id', 'gender', 'role', 'department', 'country', 'birthdate', 'age']

const table = useTable({
  form,
  columns: {},
  settings: {
    url: form.settings.url,
    lookupField: 'id',

    // Use the '...' as a continuation token
    // to infer the rest of the columns
    // that are not explicitly defined
    columnsOrder: ['firstName', 'lastName', '...', 'birthdate', 'age'],
  },
})
</script>