labelFunction and sortCompareFunction and large data sets in Flex

Question

OK, below is a simplified example of what I have to do.

So far so good, works A1. The IDs are replaced by the friend name, and the column is sortable.

Now, I have to apply this to a system containing thousands of IDs and thousands of rows.

I tried it and wooooooooooo, it is so slow, impossible to deliver something like this to a client...

What would be, in your opinion, the best approach to achieve the same goal?

The only idea I had is instead of storing only the ID in the DB, to store the names as strings too... I just thing it is information I shouldn't have to store...

Anybody have an idea? Another way to sort the rendered string instead of having to recall the fId.labelFunction(obj1, fId) on each row?

THANKS A LOT!

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.events.FlexEvent;

        [Bindable]
        private var _friendList:ArrayCollection = new ArrayCollection([
            {friend_id : 1},
            {friend_id : 3},
            {friend_id : 2},
            {friend_id : 2},
            {friend_id : 1},
            {friend_id : 2},
            {friend_id : 1},
            {friend_id : 3}
        ]);

        private function friendNameFromID(item:Object, column:DataGridColumn):String
        {
            var id:int = item[column.dataField];

            if (id == 1)
                return "Thomas";

            if (id == 2)
                return "Anthony";

            if (id == 3)
                return "George"

            return "";
        }

        private function sortFromFriendName(obj1:Object, obj2:Object):int
        {
            var value1:String = fId.labelFunction(obj1, fId);
            var value2:String = fId.labelFunction(obj2, fId);

            if (value1 == value2)
                return 0;
            else if (value1 > value2)
                return 1;
            else
                return -1;
        }

    ]]>
</fx:Script>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<mx:DataGrid id="myDataGrid" dataProvider="{_friendList}" width="90%" height="90%" horizontalCenter="0" verticalCenter="0">
    <mx:columns>
        <mx:DataGridColumn dataField="friend_id"/>
        <mx:DataGridColumn id="fId" dataField="friend_id" labelFunction="friendNameFromID" sortCompareFunction="sortFromFriendName"/>
    </mx:columns>
</mx:DataGrid>