Having Extra line on Table

[mcamendoza1]

            <DataTable
              minHeight={150}
              withBorder
              columns={[
                { accessor: 'name', width: 100 },
                { accessor: 'streetAddress', width: 100 },
                { accessor: 'city', width: 100 },
                { accessor: 'state', width: 100 },
              ]}
              // records={records}
              records={[]}
              totalRecords={companies.length}
              recordsPerPage={PAGE_SIZE}
              page={page}
              onPageChange={(p) => setPage(p)}
              noRecordsText="No records to show"
              sx={{
                marginRight: 50,
                borderRadius: 5,
              }}
            />

[icflorescu]

@mcamendoza1 are you on the last version of the component?

I am unable to reproduce what you're showing.
Everything looks good on my test setup, but this looks suspiciously similar to an older bug in one of the initial versions.

[mcamendoza1]

@mcamendoza1 are you on the last version of the component?

I am unable to reproduce what you're showing. Everything looks good on my test setup, but this looks suspiciously similar to an older bug in one of the initial versions.

I'm using

  "name": "service-zero-web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/server": "^11.10.0",
    "@mantine/core": "^5.4.2",
    "@mantine/hooks": "^5.4.2",
    "@mantine/next": "^5.4.2",
    "mantine-datatable": "^1.7.3",
    "next": "^12.2.5",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tabler-icons-react": "^1.54.0"
  },
  "devDependencies": {
    "eslint": "8.22.0",
    "eslint-config-next": "12.2.5"
  }
}

[mcamendoza1]

import companies from 'data/sample/client-data.json'
const PAGE_SIZE = 1

const Client = () => {
  const [page, setPage] = useState(1)
  const [records, setRecords] = useState(companies.slice(0, PAGE_SIZE))

  useEffect(() => {
    const from = (page - 1) * PAGE_SIZE
    const to = from + PAGE_SIZE
    setRecords(companies.slice(from, to))
  }, [page])

  return (
    <>
      <div sx={{ backgroundColor: 'gray' }}>
        <SimpleGrid
          sx={{
            marginLeft: 50,
          }}
          cols={1}
        >
          <div>
            <h1>Client</h1>
            <SimpleGrid cols={2}>
              <div>
                <p>Client Manager</p>
              </div>
              <Container
                sx={{
                  align: 'right',
                }}
              >
                <p>Client Manager</p>
              </Container>
            </SimpleGrid>
            <DataTable
              minHeight={150}
              withBorder
              columns={[
                { accessor: 'name', width: 100 },
                { accessor: 'streetAddress', width: 100 },
                { accessor: 'city', width: 100 },
                { accessor: 'state', width: 100 },
              ]}
              // records={records}
              records={[]}
              totalRecords={companies.length}
              recordsPerPage={PAGE_SIZE}
              page={page}
              onPageChange={(p) => setPage(p)}
              noRecordsText="No records to show"
              sx={{
                marginRight: 50,
                borderRadius: 5,
              }}
            />
          </div>
        </SimpleGrid>
      </div>
    </>
  )
}

[mcamendoza1]

it seems i should put the datatable to a container or grid to avoid this

[icflorescu]

Glad to hear you found a solution!