Entendiendo una vista tipo tabla estandarizada

Esta guía buscar enseñar y mostrar mediante ejemplos la forma estándar establecida para crear una vista de tipo tabla donde se muestran informaciones distribuidas en columnas y filas.

EjemploCardTable

En este ejemplo vemos que el componente se divide en 3 secciones que son:

Header (o encabezado): Aquí podemos encontrar la funcionalidad de los filtros, búsqueda y acciones de la tabla.
Content (o contenido): En esta sección podemos encontrar la tabla con sus diferentes columnas, filas, filtros por columnas y acciones por filas.
Footer (o pie de página): En esta sección podemos encontrar la paginación en la parte central. También podemos encontrar en algunos casos acciones en los laterales.

A continuación tenemos este código de muestra sobre este componente:

const FiltersPage = () => {
  const filters = useGlobalQuery("Filters", "getAll");

  const columns: IDataTableColumnsProps<IFilter>[] = [
    {
      header: "#",
      sortable: true,
      field: "FiltroId",
    },
    {
      filter: true,
      sortable: true,
      field: "Nombre",
      dataType: "text",
      header: "Nombre",
      filterMatchMode: FilterMatchMode.STARTS_WITH,
    },
    {
      filter: true,
      header: "Area",
      dataType: "numeric",
      field: "FiltroAreaNombre",
      filterOperator: FilterOperator.AND,
      filterMatchMode: FilterMatchMode.EQUALS,
    },
    {
      filter: true,
      sortable: true,
      dataType: "date",
      header: "Creacion",
      field: "FechaCreacion",
      filterOperator: FilterOperator.AND,
      filterMatchMode: FilterMatchMode.DATE_IS,
    },
    {
      filter: true,
      header: "Estado",
      field: "EstadoId",
      dataType: "select",
      filterOperator: FilterOperator.AND,
      filterMatchMode: FilterMatchMode.EQUALS,
      filterOptions: [{ value: 1, label: "Activo" }],
    },
  ];

  return (
    <CardTable
      type="data"
      title="Filtros"
      columns={columns}
      value={filters.data}
      loading={filters.isPending}
      subtitle="Todos los filtros"
      tableActions={[
        {
          icon: "trash",
          label: "Borrar",
        },
        {
          icon: "pencil",
          label: "Editar",
        },
        {
          icon: "x",
          label: "Cerrar",
        },
      ]}
    />
  );
};

Columnas

En esta parte le pedimos que lean con detenimiento todo lo que describiremos.

const columns: IDataTableColumnsProps<IFilter>[] = [
  {
    header: "#",
    sortable: true,
    field: "FiltroId",
  },
  {
    filter: true,
    sortable: true,
    field: "Nombre",
    dataType: "text",
    header: "Nombre",
    filterMatchMode: FilterMatchMode.STARTS_WITH,
  },
  {
    filter: true,
    header: "Area",
    dataType: "numeric",
    field: "FiltroAreaNombre",
    filterOperator: FilterOperator.AND,
    filterMatchMode: FilterMatchMode.EQUALS,
  },
  {
    filter: true,
    sortable: true,
    dataType: "date",
    header: "Creacion",
    field: "FechaCreacion",
    filterOperator: FilterOperator.AND,
    filterMatchMode: FilterMatchMode.DATE_IS,
  },
  {
    filter: true,
    header: "Estado",
    field: "EstadoId",
    dataType: "select",
    filterOperator: FilterOperator.AND,
    filterMatchMode: FilterMatchMode.EQUALS,
    filterOptions: [{ value: 1, label: "Activo" }],
  },
];

En este primer ejemplo de las columnas vemos que es un arreglo de objetos. Esto es lo esencial al crear una vista de tabla que tengan sus columnas definidas y claras. Para eso primero creamos el objeto columns y le asignamos el tipo para el autocompletado:

const columns: IDataTableColumnsProps<IFilter>[] = [];

Luego de creada la constante de las columnas procedemos a explicar sobre el objeto columna.

field, esta propiedad se refiere a la propiedad del objeto que deseas mostrar en la tabla.
header, esta propiedad es el titulo de la columna.
sortable, esta propiedad habilita la funcionalidad de ordenar las filas de las columnas en modo descendente y ascendente.
filter, esta propiedad cambia el comportamiento de la columna habilitando los filtros por columna.

Una vez habilitados los filtros por la propiedad filter se habilitan otras propiedades:

dataType, esta propiedad indica el tipo de dato que contiene las filas de la columna con el propósito de indicar el comportamiento exacto que tendrán los filtros.
filterOperator, esta propiedad es usada para habilitar multiples reglas en los filtros. Cuando el operador es AND todas las reglas de la columna deben cumplirse, al contrario seria OR que solo son algunas.
filterMatchMode, esta propiedad es usada para colocar el matchMode por defecto del filtro de la columna.
filterOptions, esta propiedad es usada para enviar las opciones disponibles al campo select cuando el tipo de dato dataType es igual a select.

En este caso de uso vemos que tenemos a la propiedad EstadoId.

  {
    filter: true,
    header: "Estado",
    field: "EstadoId",
    dataType: "select",
    filterOperator: FilterOperator.AND,
    filterMatchMode: FilterMatchMode.EQUALS,
    filterOptions: [{ value: 1, label: "Activo" }],
  },

Vemos que tenemos habilitado los filtros con un tipo de dato select ya que para filtrar por estados es la manera indicada. Luego vemos que tenemos habilitado el filterOperator haciendo posible que se pueda filtrar por multiples reglas. Y por ultimo, tenemos filterOptions para enviar los estados disponibles a filtrar en la columna.

Componente principal

En este apartado estaremos viendo como funciona el componente principal CardTable.

<CardTable
  type="data"
  title="Filtros"
  columns={columns}
  value={filters.data}
  loading={filters.isPending}
  subtitle="Todos los filtros"
  tableActions={[
    {
      icon: "trash",
      label: "Borrar",
    },
    {
      icon: "pencil",
      label: "Editar",
    },
    {
      icon: "x",
      label: "Cerrar",
    },
  ]}
/>

En el ejemplo vimos cuales propiedades son las requeridas para básicamente iniciar una vista estándar.