MuDBase/client/src/components/SongTable.tsx

import React from 'react';
import MaterialTable from 'material-table';

export interface Entry {
    title: String,
    artistName: String
}

export interface IProps {
    songs: Entry[]
}

export default function SongTable(props: IProps) {
    const tableTitle = "Songs";
    const tableColumns = [
        { title: "Title", field: 'title' },
        { title: "Artist", field: 'artistName' },
    ];
    const tableData = props.songs;

    const options = {
        filtering: true,
        paging: true,
        pageSize: 100,
        pageSizeOptions: [ 5, 10, 20, 50, 100 ]
    };

    return (
        <MaterialTable
            title={tableTitle}
            columns={tableColumns}
            data={tableData}
            options={options}
        />
    );
}