CODEWITHSUNDEEP
cssreactjsreact-table
nCis
nCis

Reputation: 98

React-table hide column entirely

I have this table in react-table with the following columns:

    const columns = useMemo(
    () => [
      {
        Header: "Id",
        accessor: "id",
      },

      {
        Header: "Email",
        accessor: "Email",
        width: 150,
      },
      {
        Header: "Pachet",
        accessor: "Pachet",
        width: 70,
      },
      {
        Header: "Observatii",
        accessor: "Observatii",
        width: 200,
      },
      {
        Header: "Pret",
        accessor: "Pret",
        width: 70,
      },
      {
        Header: "Medic asignat",
        accessor: "Medic asignat",
      },
      {
        Header: "Status",
        accessor: "Status",
        width: 70,
      },
      {
        Header: "Factura",
        accessor: "Factura",
        width: 70,
        Cell: ({ row }) => (
          <Button
            onClick={() => {
              downloadInvoice(row.values.id);
            }}
          >
            ⬆️
          </Button>
        ),
      },
    ],
    []
  );

The thing is that i would like to completely hide the Id column since I only add it to have the Id accessible for my download API.

I have no idea how to hide it, any tips would be appreciated.
Thanks!

Upvotes: 0

Views: 3322

Answers (2)

Evren
Evren

Reputation: 4410

You can change id object like this

{
   id: "expander"
}

Upvotes: 0

nCis
nCis

Reputation: 98

I managed to finally fix this by using the hiddenColumns functionality.

Basically what I do is I declare my table instance in the following way:

const tableInstance = useTable(
    { columns, data, initialState: {
      hiddenColumns: ['id','Status']
    } ,defaultColumn },
    useGlobalFilter,
    tableHooks,
    useSortBy,
    useFlexLayout,
    useRowSelect,
    useResizeColumns
  );

Upvotes: 1

Related Questions