jbetancur / react-data-table-component

A responsive table library with built-in sorting, pagination, selection, expandable rows, and customizable styling.
https://react-data-table-component.netlify.app
Apache License 2.0
2.04k stars 411 forks source link

Pagination row per page show double arrow/weird arrow #1157

Open Adtyya opened 1 year ago

Adtyya commented 1 year ago

image

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 commented 1 year ago

code?

Adtyya commented 1 year ago
  <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 commented 1 year ago

paginationComponentOptions and tableCustomStyles??

ipacs13 commented 1 year ago

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

this is how it looks like:

image

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 commented 6 months ago

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

memmen commented 5 months ago

Having the same issue on many projects.

memmen commented 5 months ago

I created pr with fix https://github.com/jbetancur/react-data-table-component/pull/1224