feederaccount/MyReactTable.js

## MyReactTable.js
export default function CloudfrontList() {
    const [loading, setLoading] = useState(true);
    const [columns, setColumns] = useState([]);
    const [data, setData] = useState([]);

    const getDataForTable = async () => {
        const _columns = [{
            Header: "Name",
            Cell: cell => {
                const row = cell.row.original;
                const value = row.comment ? row.comment : row.origins[0].domain_name;
                return (
                    <Link href="/view/cloudfront/[id]" as={`/view/cloudfront/${row.id}`}>
                        <a>{value}</a>
                    </Link>
                );
            },
            accessor: row => {
                return row.comment ? row.comment : row.origins[0].domain_name;
            },
            id: Math.random() // It needs a unique ID, right?
        }, {
            Header: "Identifier",
            accessor: "id"
        }, {
            Header: "Product",
            accessor: "tags.Product"
        }];

        const _assets = await readAllAssetsOfType(AssetType.Cloudfront);

        setColumns(_columns);
        setData(_assets);
        setLoading(false);
    };

    useEffect(() => {
        getDataForTable();
    }, []);

    return (
        <>
            <Head>
                <title>Cloudfront List :: {siteTitle}</title>
            </Head>

            {loading ? (
                "loading..."
            ) : (
                <Card>
                    <CardHeader>
                        All Cloudfront Assets
                        <Badge color="secondary" className="ml-2">{data.length}</Badge>
                    </CardHeader>
                    <CardBody>
                        <Table columns={columns} data={data} />
                    </CardBody>
                </Card>
            )}
        </>
    );
}


function Table({ columns, data }) {
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable(
        {
            columns,
            data
        },
        useSortBy
    );

    return (
        <>
            <table {...getTableProps()} className="table table-sm table-hover">
                <thead>
                    {headerGroups.map(headerGroup => (
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {headerGroup.headers.map(column => (
                                <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                                    {column.render("Header")}
                                    <span>
                                        {column.isSorted
                                            ? column.isSortedDesc
                                                ? <FontAwesomeIcon icon={faSortDown} style={{ color: "#969696", width: "0.5rem" }} />
                                                : <FontAwesomeIcon icon={faSortUp} style={{ color: "#969696", width: "0.5rem" }} />
                                            : (
                                                <FontAwesomeIcon icon={faSort} style={{ color: "#969696", width: "0.5rem" }} />
                                            )}
                                    </span>
                                </th>
                            ))}
                        </tr>
                    ))}
                </thead>
                <tbody {...getTableBodyProps()}>
                    {rows.map(
                        row => {
                            prepareRow(row);
                            return (
                                <tr {...row.getRowProps()}>
                                    {row.cells.map(cell => {
                                        return (
                                            <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                                        );
                                    })}
                                </tr>
                            );
                        }
                    )}
                </tbody>
            </table>
        </>
    );
}
	export default function CloudfrontList() {
	const [loading, setLoading] = useState(true);
	const [columns, setColumns] = useState([]);
	const [data, setData] = useState([]);

	const getDataForTable = async () => {
	const _columns = [{
	Header: "Name",
	Cell: cell => {
	const row = cell.row.original;
	const value = row.comment ? row.comment : row.origins[0].domain_name;
	return (
	<Link href="/view/cloudfront/[id]" as={`/view/cloudfront/${row.id}`}>
	<a>{value}</a>
	</Link>
	);
	},
	accessor: row => {
	return row.comment ? row.comment : row.origins[0].domain_name;
	},
	id: Math.random() // It needs a unique ID, right?
	}, {
	Header: "Identifier",
	accessor: "id"
	}, {
	Header: "Product",
	accessor: "tags.Product"
	}];

	const _assets = await readAllAssetsOfType(AssetType.Cloudfront);

	setColumns(_columns);
	setData(_assets);
	setLoading(false);
	};

	useEffect(() => {
	getDataForTable();
	}, []);

	return (
	<>
	<Head>
	<title>Cloudfront List :: {siteTitle}</title>
	</Head>

	{loading ? (
	"loading..."
	) : (
	<Card>
	<CardHeader>
	All Cloudfront Assets
	<Badge color="secondary" className="ml-2">{data.length}</Badge>
	</CardHeader>
	<CardBody>
	<Table columns={columns} data={data} />
	</CardBody>
	</Card>
	)}
	</>
	);
	}


	function Table({ columns, data }) {
	const {
	getTableProps,
	getTableBodyProps,
	headerGroups,
	rows,
	prepareRow,
	} = useTable(
	{
	columns,
	data
	},
	useSortBy
	);

	return (
	<>
	<table {...getTableProps()} className="table table-sm table-hover">
	<thead>
	{headerGroups.map(headerGroup => (
	<tr {...headerGroup.getHeaderGroupProps()}>
	{headerGroup.headers.map(column => (
	<th {...column.getHeaderProps(column.getSortByToggleProps())}>
	{column.render("Header")}
	<span>
	{column.isSorted
	? column.isSortedDesc
	? <FontAwesomeIcon icon={faSortDown} style={{ color: "#969696", width: "0.5rem" }} />
	: <FontAwesomeIcon icon={faSortUp} style={{ color: "#969696", width: "0.5rem" }} />
	: (
	<FontAwesomeIcon icon={faSort} style={{ color: "#969696", width: "0.5rem" }} />
	)}
	</span>
	</th>
	))}
	</tr>
	))}
	</thead>
	<tbody {...getTableBodyProps()}>
	{rows.map(
	row => {
	prepareRow(row);
	return (
	<tr {...row.getRowProps()}>
	{row.cells.map(cell => {
	return (
	<td {...cell.getCellProps()}>{cell.render("Cell")}</td>
	);
	})}
	</tr>
	);
	}
	)}
	</tbody>
	</table>
	</>
	);
	}