Grid isn't sorting Dates properly when they are strings ... sometimes

I just found a weird problem that only seems to be happening in one screen. One of my grids has a Date column, which actually a string storing a date in mm/dd/yyyy format. When data is originally loaded, it sorts by date properly. However, when clicking the header of the Date column, it sorts the date as it would sort a flat string. 

Is there a way to overload the way columns sort? I'm sure this has been asked, as I can see it in Google multiple times, but all the questions are very old and the solutions I tried didn't work.

Just in case, here is some code to make things a bit more clear. My Grid is using a standard BeanItemContainer with the following data structure:

public class FlowFundsSuppData {
    private String date;
    private DateTime dateTime;
    private Integer charteredInst;
    private Integer creditUnions;
    private Integer assetsDc;
    private Integer assetsDb;
    private Integer origCharteredInst;
    private Integer origCreditUnions;
    private Integer origAssetsDc;
    private Integer origAssetsDb;
    private byte charteredinstDatasource;
    private byte creditunionsDatasource;
    private byte asssetsdcDatasource;
    private byte asssetsdbDatasource;

    private String status;

    public FlowFundsSuppData() {}

    public String getDate() {
        return date;
    }

    public void setDate(String date) {
        this.date = date;
    }

    public DateTime getDateTime() {
        return dateTime;
    }

    public void setDateTime(DateTime dateTime) {
        this.dateTime = dateTime;
    }

    public Integer getCharteredInst() {
        return charteredInst;
    }

    public void setCharteredInst(Integer charteredInst) {
        this.charteredInst = charteredInst;
    }

    public Integer getCreditUnions() {
        return creditUnions;
    }

    public void setCreditUnions(Integer creditUnions) {
        this.creditUnions = creditUnions;
    }

    public Integer getAssetsDc() {
        return assetsDc;
    }

    public void setAssetsDc(Integer assetsDc) {
        this.assetsDc = assetsDc;
    }

    public Integer getAssetsDb() {
        return assetsDb;
    }

    public void setAssetsDb(Integer assetsDb) {
        this.assetsDb = assetsDb;
    }

    public Integer getOrigCharteredInst() {
        return origCharteredInst;
    }

    public void setOrigCharteredInst(Integer origCharteredInst) {
        this.origCharteredInst = origCharteredInst;
    }

    public Integer getOrigCreditUnions() {
        return origCreditUnions;
    }

    public void setOrigCreditUnions(Integer origCreditUnions) {
        this.origCreditUnions = origCreditUnions;
    }

    public Integer getOrigAssetsDc() {
        return origAssetsDc;
    }

    public void setOrigAssetsDc(Integer origAssetsDc) {
        this.origAssetsDc = origAssetsDc;
    }

    public Integer getOrigAssetsDb() {
        return origAssetsDb;
    }

    public void setOrigAssetsDb(Integer origAssetsDb) {
        this.origAssetsDb = origAssetsDb;
    }

    public byte getCharteredinstDatasource() {
        return charteredinstDatasource;
    }

    public void setCharteredinstDatasource(byte charteredinstDatasource) {
        this.charteredinstDatasource = charteredinstDatasource;
    }

    public byte getCreditunionsDatasource() {
        return creditunionsDatasource;
    }

    public void setCreditunionsDatasource(byte creditunionsDatasource) {
        this.creditunionsDatasource = creditunionsDatasource;
    }

    public byte getAsssetsdcDatasource() {
        return asssetsdcDatasource;
    }

    public void setAsssetsdcDatasource(byte asssetsdcDatasource) {
        this.asssetsdcDatasource = asssetsdcDatasource;
    }

    public byte getAsssetsdbDatasource() {
        return asssetsdbDatasource;
    }

    public void setAsssetsdbDatasource(byte asssetsdbDatasource) {
        this.asssetsdbDatasource = asssetsdbDatasource;
    }

    public String getStatus() {
        return status;
    }

    public void setStatus(String status) {
        this.status = status;
    }
}

And my Grid definition goes as follows:

fofSupplementalGrid.setContainerDataSource(new BeanItemContainer<>(FlowFundsSuppData.class));
        fofSupplementalGrid.setColumnOrder("date", "charteredInst", "charteredinstDatasource", "creditUnions",
                "creditunionsDatasource", "assetsDc", "asssetsdcDatasource", "assetsDb", "asssetsdbDatasource");

        fofSupplementalGrid.getColumn("date").setHeaderCaption("Date");
        fofSupplementalGrid.getColumn("charteredInst").setHeaderCaption("Chartered Inst");
        fofSupplementalGrid.getColumn("charteredinstDatasource").setHeaderCaption("S");
        fofSupplementalGrid.getColumn("creditUnions").setHeaderCaption("Credit Union");
        fofSupplementalGrid.getColumn("creditunionsDatasource").setHeaderCaption("S");
        fofSupplementalGrid.getColumn("assetsDc").setHeaderCaption("Assets DC");
        fofSupplementalGrid.getColumn("asssetsdcDatasource").setHeaderCaption("S");
        fofSupplementalGrid.getColumn("assetsDb").setHeaderCaption("Assets DB");
        fofSupplementalGrid.getColumn("asssetsdbDatasource").setHeaderCaption("S");

        fofSupplementalGrid.getColumn("date").setEditable(false);
        fofSupplementalGrid.getColumn("charteredinstDatasource").setEditable(false);
        fofSupplementalGrid.getColumn("creditunionsDatasource").setEditable(false);
        fofSupplementalGrid.getColumn("asssetsdcDatasource").setEditable(false);
        fofSupplementalGrid.getColumn("asssetsdbDatasource").setEditable(false);

        fofSupplementalGrid.getColumn("date").setWidth(100);
        fofSupplementalGrid.getColumn("charteredInst").setWidth(200);
        fofSupplementalGrid.getColumn("charteredinstDatasource").setWidth(40);
        fofSupplementalGrid.getColumn("creditUnions").setWidth(200);
        fofSupplementalGrid.getColumn("creditunionsDatasource").setWidth(40);
        fofSupplementalGrid.getColumn("assetsDc").setWidth(200);
        fofSupplementalGrid.getColumn("asssetsdcDatasource").setWidth(40);
        fofSupplementalGrid.getColumn("assetsDb").setWidth(200);
        fofSupplementalGrid.getColumn("asssetsdbDatasource").setWidth(40);

        fofSupplementalGrid.removeColumn("dateTime");
        fofSupplementalGrid.removeColumn("origCharteredInst");
        fofSupplementalGrid.removeColumn("origCreditUnions");
        fofSupplementalGrid.removeColumn("origAssetsDc");
        fofSupplementalGrid.removeColumn("origAssetsDb");
        fofSupplementalGrid.removeColumn("status");

        fofSupplementalGrid.setSelectionMode(Grid.SelectionMode.NONE);
        fofSupplementalGrid.setImmediate(true);
        fofSupplementalGrid.setEditorEnabled(true);
        fofSupplementalGrid.setEditorBuffered(false);
        fofSupplementalGrid.setWidth("1080px");
        fofSupplementalGrid.setHeightByRows(11);

Just checking in. I still have no solution, but haven't tried too hard. Figure I will give this one more shot before spending a great deal of time. 

I can see that the FlowFundsSuppData.date field is indeed of type String, and thus it is treated as String also by the BeanItemContainer's sorting code. Please change the field "date" to a Date, then it should work properly. Basically BeanItemContainer casts the value to Comparable and then just uses the object's compareTo() method to sort.

I see. I came across that, but then a new problem arises, the output doesn't have the formatting the client wants. I take it I then have to write a column renderer for this? Or is there an easier way to format the date into MM/DD/YYYY format?