ReactJs with Ant-Design page is opened checkbox selected in Table-CodePudding

I am creating a React project with Ant-Design. When the page is opened, I want several checkboxes in the table to be selected.

Hook:

  const [selectedPages, setSelectedPages] = useState([]);

RowSelection :

  let rowSelectionPages = {
    selectedPages,
    onChange: onSelectPagesChange,
    selections: [Table.SELECTION_ALL, Table.SELECTION_NONE],
    getCheckboxProps: (record) => {
      return {
        disabled: record.screenName === 'Disabled',
        name: record.screenName,
        defaultChecked: record.key === 1
      };
    },
  };

onSelectPagesChange:

  let onSelectPagesChange = (newSelectedPages) => {
    setSelectedPages(newSelectedPages);
  };

Columns:

  let columnsPages = [
    {
      title: "screen name",
      dataIndex: "screenName",
      render: (text) => <a>{text}</a>,
    },
  ];

MyData:

  let dataPages = [
    {
      key: "1",
      screenName: "Home",
    },
    {
      key: "2",
      screenName: "Login",
    },
    {
      key: "3",
      screenName: "profile",
    },
    {
      key: "4",
      screenName: "Disabled",
    },
  ];

Table:

<Table
            rowSelection={{
              type: "checkbox",
              ...rowSelectionPages,
            }}
            columns={columnsPages}
            dataSource={dataPages}
          />

I am using Ant-Design library for the first time. This is the code I tried. But I couldn't come to a conclusion.

CodePudding user response：

Add row indexes in the state selection

const [selectedPages, setSelectedPages] = useState([0]); // check first row

demo