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

Console Warning: Received `true` for a non-boolean attribute `center`. #1185

Open seriseyes opened 10 months ago

seriseyes commented 10 months ago

Issue Check list

Describe the bug

Printing unwanted warning on console. Such as:

To Reproduce

Steps to reproduce the behavior:

  1. Go to React component that used react-data-table-component
  2. Check browser console

Expected behavior

Should not print warning

Code Sandbox, Screenshots, or Relevant Code

The Code:

import React from 'react'
import ReactDOM from 'react-dom/client'
import DataTable from 'react-data-table-component';

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <MyComponent/>
    </React.StrictMode>,
)

interface Type {
    id: number;
    title: string;
    year: string;
}

const columns = [
    {name: 'Title', selector: (row: Type) => row.title,},
    {name: 'Year', selector: (row: Type) => row.year,},
];

const data: Type[] = [
    {id: 1, title: 'Beetlejuice', year: '1988',},
    {id: 2, title: 'Ghostbusters', year: '1984',},
]

function MyComponent() {
    return <DataTable
        columns={columns}
        data={data}
    />
}

The Warning:

image image image

Versions (please complete the following information)

"dependencies": {
    "react": "^18.2.0",
    "react-data-table-component": "^7.5.4",
    "react-dom": "^18.2.0",
    "styled-components": "^6.1.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.37",
    "@types/react-dom": "^18.2.15",
    "@typescript-eslint/eslint-plugin": "^6.10.0",
    "@typescript-eslint/parser": "^6.10.0",
    "@vitejs/plugin-react": "^4.2.0",
    "eslint": "^8.53.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.4",
    "typescript": "^5.2.2",
    "vite": "^5.0.0"
  }
anders2410 commented 7 months ago

This is the same comment as on: https://github.com/jbetancur/react-data-table-component/issues/1161