i want to make a component of table which is reusable for every function i am facing issue regrading columns and rows how can i pass every time different data and columns for every table ?

currently i have created component for each table that's not i want to do if i have the similar table how can i pass different data and columns to another ?

<Table
          className="vmsb-table mission-table"
          //   rowClassName={(record, index) => record.type}
          scroll={{ x: "max-content", y: 600 }}
          columns={missionColumns}
          dataSource={missionData}
          pagination={{
            className: "list-pagination",
            total: 85,

            defaultPageSize: 10,
            defaultCurrent: 1,
          }}
          expandable={{
            expandedRowRender,

            rowExpandable: (record) => record.name !== "Not Expandable",
            expandIcon: ({ expanded, onExpand, record }) =>
              expanded ? (
                <div className="icon-wrapper">
                  <i
                    className="icon-table-arrow-down"
                    style={{
                      fontSize: "9px",
                      width: "16px",
                      cursor: "pointer",
                    }}
                    onClick={(e) => onExpand(record, e)}
                  />
                </div>
              ) : (
                <div className="icon-wrapper">
                  <i
                    className="icon-table-arrow-right"
                    style={{ width: "16px", cursor: "pointer" }}
                    onClick={(e) => onExpand(record, e)}
                  />
                </div>
              ),
          }}
        />

CodePudding user response：

I'm not sure I understand the question... why you not simply try:

const MyTable = ({missionColumns, missionData}) => {
     return <Table
          className="vmsb-table mission-table"
          //   rowClassName={(record, index) => record.type}
          scroll={{ x: "max-content", y: 600 }}
          columns={missionColumns}
          dataSource={missionData}
          ...etc...
     </Table>
}

Usage:

<MyTable missionColumns={yourcolumns} missionData={yourdata} />