Pagination row per page show double arrow/weird arrow

[Adtyya]

See at rows per page number, it has two arrow.

Tailwindcss ^3.3.3
React & ReactDOM ^18.2.0
Create this app using CRA

[zahir-dct]

code?

[Adtyya]

  <DataTable
    columns={columns}
    data={data}
    progressPending={loading}
    pagination
    paginationServer
    paginationTotalRows={totalRows}
    onChangeRowsPerPage={handlePerRowsChange}
    onChangePage={handlePageChange}
    paginationComponentOptions={paginationComponentOptions}
    customStyles={tableCustomStyles}
    paginationPerPage={10}
    progressComponent={<Loading />}
  />

[zahir-dct]

paginationComponentOptions and tableCustomStyles??

[ipacs13]

@zahir-dct I am also facing this on the project I am working.

this is how it looks like:

I wanted to remove the solid arrow one and retain the 2-line arrow.

Thank you in advance :)

THis is my code:

            customStyles={{
                headCells: {
                    style: {
                        fontWeight: "bold",
                        backgroundColor: "#F4F9FF",
                    },
                },
            }}
            {...props}
            columns={props.loading ? columnsLoading : props.columns}
            data={props.loading ? Array(8).fill({}) : props?.data || []}
            className="pb-12"
            paginationRowsPerPageOptions={[10, 20, 30]}
            responsive
        />

[mesamtimmar1]

I'm facing the same issue. Have you been able to resolve it?

[memmen]

Having the same issue on many projects.

[memmen]

I created pr with fix
#1224

[muhismail015]

on version "^7.7.0", still have a weird arrow, how to solve this ?

*edit: i think because we use tailwindcss, trying to remove using css solve the temporary problem if u dont want to custom it

.rdt_Pagination select + svg {
  display: none !important;
}

[nestorzamili]

on version "^7.7.0", still have a weird arrow, how to solve this ?

*edit: i think because we use tailwindcss, trying to remove using css solve the temporary problem if u dont want to custom it

.rdt_Pagination select + svg {
display: none !important;
}

This fix worked for me, thanks!

@ibobdb seems like this is the same issue you’re dealing with. Give this fix a shot!