extended-salmon•8mo ago

useTable custom columns

How can I add custom logic for the column display in useTable? For example, if I have first_name and last_name columns but I want to display them as a single name column?

3 Replies

kapa.ai•8mo ago

Hi @David. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, you can customize the contents of a column in the useTable hook by using the cell property in the column definition object. This allows you to add custom logic for the column display. Here's an example of how you can customize the contents of a column:

{
  id: "actions",
  accessorKey: "id",
  header: "Actions",
  cell: function render({ getValue }) {
    return (
      <div className="flex justify-around items-center">
        <button
          className="btn btn-xs btn-circle btn-ghost m-1"
          onClick={() => {
            edit("products", getValue() as string);
          }}
        >
          <EditIcon />
        </button>
        <button
          className="btn btn-xs btn-circle btn-ghost m-1"
          onClick={() => {
            show("products", getValue() as string);
          }}
        >
          <ShowIcon />
        </button>
        <button
          className="btn btn-xs btn-circle btn-ghost m-1"
          onClick={() => {
            deleteProduct({
              resource: "products",
              id: getValue() as string,
            });
          }}
        >
          <DeleteIcon />
        </button>
      </div>
    );
  },
}

{
  id: "actions",
  accessorKey: "id",
  header: "Actions",
  cell: function render({ getValue }) {
    return (
      <div className="flex justify-around items-center">
        <button
          className="btn btn-xs btn-circle btn-ghost m-1"
          onClick={() => {
            edit("products", getValue() as string);
          }}
        >
          <EditIcon />
        </button>
        <button
          className="btn btn-xs btn-circle btn-ghost m-1"
          onClick={() => {
            show("products", getValue() as string);
          }}
        >
          <ShowIcon />
        </button>
        <button
          className="btn btn-xs btn-circle btn-ghost m-1"
          onClick={() => {
            deleteProduct({
              resource: "products",
              id: getValue() as string,
            });
          }}
        >
          <DeleteIcon />
        </button>
      </div>
    );
  },
}

In this example, the cell property is used to customize the contents of the Actions column to add show, edit, and delete buttons. The getValue function is used to get the value of the current row's id field. However, the extracts do not provide a specific example of how to combine two columns into one. You might be able to achieve this by creating a new column with a custom cell function that retrieves the values of the first_name and last_name fields and combines them. But without more specific information or examples, it's hard to provide a more detailed answer. For more information, you can refer to the refine documentation (https://refine.dev/docs/examples) and blog posts (https://refine.dev/blog/tanstack-react-table#how-to-use-react-table-with-refine-part-4). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@183688166274760704> kapa.ai is still learning and improving, please let us know how it did by reacting below

plain-purple•8mo ago

Hello @David you can use render prop for this for more information: https://ant.design/components/table#column

Table - Ant Design

An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises